首先得先引入对应的js

1、jquery.min.js  首先导入

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

这是  jsp 页面

关键的table  代码

<table id="fuck" class="table table-bordered data-table"> <thead> <tr> <span style="white-space:pre"> </span> <th>姓名</th> <span style="white-space:pre"> </span> <th>账号</th> <span style="white-space:pre"> </span> <th>登录时间</th> <span style="white-space:pre"> </span></tr> </thead> <tbody> </tbody> </table> 必须保证  thead    tbody

存在

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

这里我贴出关键代码

$("#fuck").dataTable({ "oLanguage" : { // 汉化 "sProcessing" : "正在加载数据...", "sLengthMenu" : "显示_MENU_条 ", "sZeroRecords" : "没有您要搜索的内容", "sInfo" : "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条", "sInfoEmpty" : "记录数为0", "sInfoFiltered" : "(全部记录数 _MAX_ 条)", "sInfoPostFix" : "", "sSearch" : "搜索", "sUrl" : "", "oPaginate" : { "sFirst" : "第一页", "sPrevious" : " 上一页 ", "sNext" : " 下一页 ", "sLast" : " 最后一页 " } }, "bJQueryUI": true, "bPaginate" : true,// 分页按钮 "bFilter" : true,// 搜索栏 "bLengthChange" : true,// 每行显示记录数 "iDisplayLength" : 10,// 每页显示行数 "bSort" : false,// 排序 //"aLengthMenu": [[50,100,500,1000,10000], [50,100,500,1000,10000]],//定义每页显示数据数量 //"iScrollLoadGap":400,//用于指定当DataTable设置为滚动时，最多可以一屏显示多少条数据 //"aaSorting": [[4, "desc"]], "bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息 "bWidth":true, //"sScrollY": "62%", //"sScrollX": "210%", "bScrollCollapse": true, "sPaginationType" : "full_numbers", // 分页，一共两种样式 另一种为two_button // 是datatables默认 "bProcessing" : true, "bServerSide" : true, "bDestroy": true, "bSortCellsTop": true, "sAjaxSource": '/getInfo.action', "aoColumns": [ { "mData": "id", 'sClass':'left'}, { "mData": "name", 'sClass':'center'}, { "mData": "account",'sClass':'left'}, { "mData": "logintime", 'sClass':'left'} /* { "mData": "password",'sClass':'left',"mRender":function(data,type,full){ return "<button type='button' onclick=fuck11("+data+")>"+data+"</button>" } } */ ], "fnServerData" : function(sSource, aoData, fnCallback) { $.ajax({ "type" : 'post', "url" : sSource, "dataType" : "json", "data" : { aoData : JSON.stringify(aoData) }, "success" : function(resp) { fnCallback(resp); } }); } });

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

这是struts2的关键代码

public String list() { String sEcho = "";// 记录操作的次数 每次加1 String iDisplayStart = "";// 起始 String iDisplayLength = "";// size String sSearch = "";// 搜索的关键字 int count = 0 ; //查询出来的数量 JSONArray ja = (JSONArray) JSONArray.parse(aoData); //分别为关键的参数赋值 for (int i = 0; i < ja.size(); i++) { JSONObject obj = (JSONObject) ja.get(i); if (obj.get("name").equals("sEcho")) sEcho = obj.get("value").toString(); if (obj.get("name").equals("iDisplayStart")) iDisplayStart = obj.get("value").toString(); if (obj.get("name").equals("iDisplayLength")) iDisplayLength = obj.get("value").toString(); if (obj.get("name").equals("sSearch")) sSearch = obj.get("value").toString(); } //为操作次数加1 int initEcho = Integer.parseInt(sEcho)+1; count = managerService.findManagerToPageCount(Integer .parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch); List<Manager> managers = managerService.findManagerToPage(Integer .parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch); dataMap.put("iTotalRecords", count); dataMap.put("sEcho",initEcho); dataMap.put("iTotalDisplayRecords", count); dataMap.put("aaData", managers); return SUCCESS; }

然后记得  返回的 json船一定要符合格式  不然table是无法显示的