Jquery的DataTable插件 AJAX 服务器分页的的学习心得（java版）

来源：互联网发布：python余弦相似度编辑：程序博客网时间：2024/06/09 13:33

首先得先引入对应的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 = "";// 记录操作的次数  每次加1String iDisplayStart = "";// 起始String iDisplayLength = "";// sizeString 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();}//为操作次数加1int  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是无法显示的

1 0