首页 > 代码库 > Jquery的DataTable插件 AJAX 服务器分页的的学习心得(java版)
Jquery的DataTable插件 AJAX 服务器分页的的学习心得(java版)
首先得先引入对应的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是无法显示的
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。