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

转载自http://blog.csdn.net/cjaver/article/details/38143151

首先得先引入对应的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是无法显示的