java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据

2017-07-16

学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址

插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说,直接代码

1.客户端(jsp页面)

1 /*这些css为了控制生成的数据和分页的li标签的位置*/

2 a{

3 text-decoration:none;

4 color:black;

5 font-weight:bold;

6 text-align:center;

7 }

8 table{

9 width:500px;

10 height:300px;

11 text-align:center;

12 }

13 #table{

14 position:relative;

15 top:100px;

16 }

17 #page{

18 height:50px;

19 text-align:center;

20 position:relative;

21 top:100px;

22 }

23 #page li{

24 position:relative;

25 left:450px;

26 }

27

28

css部分

1

2

3

4

5 var url ="${pageContext.request.contextPath}/show_list";6 var $table = $("

");7 var $tr = $("");8 var $td = $("编号姓名薪水部门操作");9 $tr.append($td);10 $table.append($tr);11 var datas = null; //datas,options一定要设置为全局变量,发现不设置成全局,没法使用插件

12 var options = null;13 var pagelistcount = 6; //每页显示数据个数

14 //var maxentries = 50; //要显示的数据总量,未进行传递

15 $.ajax({16 url:url,17 type:"GET",18 data:null,19 dataType:"json",20 success:function(backdata) {21 datas =backdata;22 var a =eval(backdata);23 options={24 "id":"page", //----显示页码的元素(数据放在哪里)---->上面的div标签

25 "data":datas, //-----返回的数据---->json形式

26 "maxshowpageitem":10,//-----最多显示的页码个数

27 "pagelistcount":pagelistcount,//-----每页显示数据个数,下面的callback是每个分页插件都有的回调函数

28 "callBack":function(result){ //----result表示处理好的数据集,比如你设置了pagelistcount为6,那么result就有6条数据

29 $("#table").append($table);30 //遍历生成表格并插入数据

31 $.each(result,function(index,emp) {32 $tr = $("

");33 $table.append($tr);34 for(var i=0; i<=4; i++) {35 $td = $("");36 $tr.append($td);37 }38 var $tr = $("table tr");39 //解决多生成表格的问题--->总数50,每页6条,最后一页不足6条,这样解决多生成表格的问题

40 if($tr.size() >result.length) {41 $("table tr:gt("+ result.length + ")").remove();42 }

44 var $td = $tr.eq(index+1).find("td");45 var info =$(result).get(index);46 var $empId = $td.eq(0).text(info.empId);47 var $empName = $td.eq(1).text(info.empName)48 var $salary = $td.eq(2).text(info.salary);49 var $dept = $td.eq(3).text(info.dept.deptName);50 var $action = $td.eq(4).html("修改  删除");51 $("#del" + info.empId).click(function() {52 if(window.confirm("确定要删除吗?删除之后无法恢复!!!")) {53 $(this).attr("href","${delete}?empId=" +info.empId);54 }55 })56 });57 }58 };59 page.init(datas.length,1,options); //执行分页,1表示加载完成后显示为第一页

60 }61 });62

63

64