fpage.js
5.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
function loadpageobject(){
var param;
var main_div;
var page_div;
this.setMainDiv = function(p){main_div = p};
this.setPageDiv = function(p){page_div = p;};
this.setParam = function(p){param = p;};
function createLiA(page, text, active, func){
var li = document.createElement("li");
var a = document.createElement("a");
li.appendChild(a);
a.innerHTML = text;
//激活状态
if(active)
{
li.setAttribute("class", "active");
}
else
{
a.onclick = func;
a.setAttribute("page", page);
}
a.href = "javascript:void(0)";
return li;
}
function createA(page, text, active, func){
var a = document.createElement("a");
a.setAttribute("data-role", "button");
//a.setAttribute("class", "ui-link ui-btn ui-shadow ui-corner-all ui-first-child ui-last-child");
a.setAttribute("class", "ui-link ui-btn ui-shadow ui-corner-all ui-last-child");
a.innerHTML = text;
//激活状态
if(active)
{
}
else
{
a.onclick = func;
a.setAttribute("page", page);
}
a.href = "javascript:void(0)";
return a;
}
//添加分页导航按钮
function addPageCode(obj, func){
var ul = document.createElement("ul");
var show_count = 0;
ul.setAttribute("class", "pagination");
if(obj.page > 1)
ul.appendChild(createLiA(obj.page-1, "«", false, func));
//显示...
if(obj.page >= 3)
{
ul.appendChild(createLiA(1, "1", false, func));
ul.appendChild(createLiA(obj.page-2, "...", false, func));
}
for(var i = obj.page-1; i <= obj.all_page; i ++)
{
if(i < 1 || i > obj.all_page)
continue;
show_count ++;
//只显示三个count
if(show_count > 3)
break;
var li = null;
if(i == obj.page)
li = createLiA(i, i, true, func); //激活状态
else
li = createLiA(i, i, false, func); //
ul.appendChild(li);
}
if(obj.page <= obj.all_page-2)
{
ul.appendChild(createLiA(obj.page+2, "...", false, func));
ul.appendChild(createLiA(obj.all_page, obj.all_page, false, func));
}
if(obj.page < obj.all_page)
ul.appendChild(createLiA(obj.page+1, "»", false, func));
//添加
$(page_div).append(ul);
}
function addPageCodeMobile(obj, func){
var div = document.createElement("div");
div.setAttribute("data-role", "controlgroup");
div.setAttribute("data-type", "horizontal");
div.setAttribute("class", "ui-controlgroup ui-controlgroup-horizontal ui-corner-all");
var ul = document.createElement("div");
ul.setAttribute("class", "ui-controlgroup-controls");
if(obj.page > 1)
{
var a = createA(obj.page-1, "«", false, func);
ul.appendChild(a);
}
for(var i = 1; i <= obj.all_page; i ++)
{
var a = null;
if(i == obj.page)
a = createA(i, i, true, func); //激活状态
else
a = createA(i, i, false, func);
ul.appendChild(a);
}
if(obj.page < obj.all_page)
{
var a = createA(obj.page+1, "»", false, func);
ul.appendChild(a);
}
$(div).append(ul);
//添加
$(page_div).append(div);
}
function onclick_func(){
var page = parseInt(this.getAttribute("page"));
param.page = page;
squery();
if(param.page_click)
{
param.page_click(page);
}
}
function squery(){
if(param && param.url)
{
if(!param.data)
{
param.data = {};
}
param.data.total = param.page;
param.data.length = param.page_count;
//console.log(param.data);
$.ajax({
url:param.url,
data:param.data,
error:function(data){
if(param.error)
param.error();
},
success:function(data){
console.log(data);
if(data.status == 1)
{
$(main_div).html("");
$(page_div).html("");
var result_text = "";
if(param.startData)
{
//$(main_div).append(param.startData());
result_text += param.startData();
}
for(var i = 0 ; data.data && i < data.data.length; i ++)
{
if(param.callData)
{
//传递数据和index
var text = param.callData(data.data[i], i);
//$(main_div).append(text);
result_text += text;
}
}
if(param.endData)
{
//$(main_div).append(param.endData());
result_text += param.endData();
}
//console.log(main_div);
$(main_div).html(result_text);
//console.log(data.data);
//设置底下的分页
var all_page = Math.ceil(data.count/param.page_count);
//添加底下的导航栏
if(param.mobile == 1) //定义手机版本
addPageCodeMobile({page:param.page,all_page:all_page}, onclick_func);
else //bootstrap电脑版本
addPageCode({page:param.page, all_page:all_page}, onclick_func);
}
}
});
}
}
//开始请求数据
this.query = function(){
squery();
}
this.getParam = function(){
return param;
}
this.setParam = function(d){
param = d;
}
}
$.fn.loaddata = function(obj){
/*
* url:,
* data:{
*
* },
* page_count: //一页显示的数据的数量
* page: //当前请求的是第几页
* callData: //数据回调
*/
var o = new loadpageobject();
var main_div = document.createElement("div");
var page_div = document.createElement("div");
o.setParam(obj); //设置对象参数
o.setPageDiv(page_div); //设置分页div
o.setMainDiv(main_div);
this.append(main_div);
this.append(page_div);
o.query();
return o;
}