Jquery的DataTable插件AJAX服务器分页的的学习心得

首先得先引入对应的js

1、jquery.min.js 首先导入

2、 File: jquery.dataTables.min.js
Version: 1.9.4 这是我使用的版本

这是 jsp 页面

关键的table 代码

view source print ?

01. <table id="fuck" class="table table-bordered data-table">

02. <thead>

03. <tr>

04.  

05. <span style="white-space:pre">        </span>  <th>姓名</th>

06. <span style="white-space:pre">      </span>  <th>账号</th>

07. <span style="white-space:pre">       </span>  <th>登录时间</th>

08. <span style="white-space:pre">        </span></tr>

09. </thead>

10. <tbody>

11.  

12. </tbody>

13. </table>

必须保证  thead tbody  存在

接着是 对 这个table 自己写的 js 文件

这里我贴出关键代码

view source print ?

01. $("#fuck").dataTable({

02. "oLanguage" : { // 汉化

03. "sProcessing" : "正在加载数据...",

04. "sLengthMenu" : "显示_MENU_条 ",

05. "sZeroRecords" : "没有您要搜索的内容",

06. "sInfo" : "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",

07. "sInfoEmpty" : "记录数为0",

08. "sInfoFiltered" : "(全部记录数 _MAX_  条)",

09. "sInfoPostFix" : "",

10. "sSearch" : "搜索",

11. "sUrl" : "",

12. "oPaginate" : {

13. "sFirst" : "第一页",

14. "sPrevious" : " 上一页 ",

15. "sNext" : " 下一页 ",

16. "sLast" : " 最后一页 "

17. }

18. },

19. "bJQueryUI": true,

20. "bPaginate" : true,// 分页按钮

21. "bFilter" : true,// 搜索栏

22. "bLengthChange" : true,// 每行显示记录数

23. "iDisplayLength" : 10,// 每页显示行数

24. "bSort" : false,// 排序

25. //"aLengthMenu": [[50,100,500,1000,10000], [50,100,500,1000,10000]],//定义每页显示数据数量

26. //"iScrollLoadGap":400,//用于指定当DataTable设置为滚动时，最多可以一屏显示多少条数据

27. //"aaSorting": [[4, "desc"]],

28. "bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息

29. "bWidth":true,

30. //"sScrollY": "62%",

31. //"sScrollX": "210%",

32. "bScrollCollapse": true,

33. "sPaginationType" : "full_numbers", // 分页，一共两种样式 另一种为two_button // 是datatables默认

34. "bProcessing" : true,

35. "bServerSide" : true,

36. "bDestroy": true,

37. "bSortCellsTop": true, 

38. "sAjaxSource": '/getInfo.action',

39. "aoColumns":

40. [ 

41. { "mData": "id", 'sClass':'left'},

42. { "mData": "name", 'sClass':'center'},

43. { "mData": "account",'sClass':'left'},

44. { "mData": "logintime", 'sClass':'left'}

45. /*

46. { "mData": "pass<a href="http://www.it165.net/edu/ebg/" target="_blank" class="keylink">word</a>",'sClass':'left',"mRender":function(data,type,full){

47. return "<button type='button' onclick=fuck11("+data+")>"+data+"</button>"

48. }

49. }

50. */

51. ],

52. "fnServerData" : function(sSource, aoData, fnCallback) {

53. $.ajax({

54. "type" : 'post',

55. "url" : sSource,

56. "dataType" : "json",

57. "data" : {

58. aoData : JSON.stringify(aoData)

59. },

60. "success" : function(resp) {

61. fnCallback(resp);

62. }

63. });

64.  

65. }

66.  

67. });

经过以上配置以后 服务器端接收的到的字符串可以转换成JSONArray 然后在服务器端获取关键的参数来分页

这是struts2的关键代码

view source print ?

01. public String list() {

02. String sEcho = "";// 记录操作的次数  每次加1

03. String iDisplayStart = "";// 起始

04. String iDisplayLength = "";// size

05. String sSearch = "";// 搜索的关键字

06. int count = 0 ;  //查询出来的数量

07. JSONArray ja = (JSONArray) JSONArray.parse(aoData);

08. //分别为关键的参数赋值

09. for (int i = 0; i < ja.size(); i++) {

10. JSONObject obj = (JSONObject) ja.get(i);

11. if (obj.get("name").equals("sEcho"))

12. sEcho = obj.get("value").toString();

13. if (obj.get("name").equals("iDisplayStart"))

14. iDisplayStart = obj.get("value").toString();

15. if (obj.get("name").equals("iDisplayLength"))

16. iDisplayLength = obj.get("value").toString();

17. if (obj.get("name").equals("sSearch"))

18. sSearch = obj.get("value").toString();

19. }

20.  

21. //为操作次数加1

22. int  initEcho = Integer.parseInt(sEcho)+1;

23. count = managerService.findManagerToPageCount(Integer

24. .parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch);

25. List<Manager> managers = managerService.findManagerToPage(Integer

26. .parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch);

27. dataMap.put("iTotalRecords", count);

28. dataMap.put("sEcho",initEcho);

29. dataMap.put("iTotalDisplayRecords", count);

30. dataMap.put("aaData", managers);

31. return SUCCESS;

32. }