Datatables（3）完整的datatables案例

靈感來自datatables官網

和http://blog.csdn.net/star535X/article/details/50060427 這個人寫的很棒很全面

1 關於js

$(function() {
    $("#aaa, #bbb, #ccc, #ddd").unbind("change").bind({//aaa bbb……分別是四個下拉框 選中時觸發ajax 使用語句table.ajax.reload();
        change : function(){
            table.ajax.reload();
        }
    });
    table=$('#list_tab').DataTable({
        "aLengthMenu": [[10, 15, 20], [10, 15, 20]],//搜索欄顯示
        "order": [[2, "desc"]],//第2列的數據倒序排序 此條會通過參數傳給服務器
        "processing": true,//代碼沒加載完成時 會顯示加載中…
        "searching": false,//關閉datatables自帶搜索功能（沒什么用）
        "bPaginate": true, //翻頁功能
        "bLengthChange": true, //改變每頁顯示數據數量
        "bFilter": true, //過濾功能
        "bSort": true, //排序功能
        "serverSide": true,//服務器端處理數據
        "sPaginationType": "full_numbers",      //翻頁界面類型
        //"sAjaxSource": "/orderCenter/dataTable",
        //"fnServerData":retrieveData, //與后台交互獲取數據的處理函數
        "oLanguage":    //DataTable中文化 把提示語之類的換成中文
        {
            "sProcessing": "正在加載中......",
            "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
            "sZeroRecords": "對不起，查詢不到相關數據！",
            "sEmptyTable": "表中無數據存在！",
            "sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
            "sInfoFiltered": "數據表中共為 _MAX_ 條記錄",
            "sSearch": "搜索",
            "oPaginate": {
                "sFirst": "首頁",
                "sPrevious": "上一頁",
                "sNext": "下一頁",
                "sLast": "末頁"
            }
        },
        ajax: {
            "type": "POST",
            "url": '/orderCenter/dataTable',
            "data": function (data) {//在此處對data（datatables傳給服務器端的數據）進行處理 data.start是從哪個數據開始，data.length是頁面長度 通過這兩個參數可以分頁 
　　　　　　　　　　　　　　　　　　　　　　//currentPage pageSize 是我們項目需要的參數 為了改動不大在data中加了這兩個參數
                var order = data.order;
                data.currentPage = data.start / data.length + 1;
                data.pageSize = data.length;
                data.orderColumn = data.order[0].column;//此處order[0].column是第幾列要排序
                data.orderDir = data.order[0].dir;//此處是asc desc

                data.aaa= $("#aaa").val();//aaa bbb……可以在此處給data添加參數 這是自定義搜索欄傳值的方式
                data.bbb= $("#bbb").val();
                data.ccc= $("#ccc").val();
                data.ddd= $("#ddd").val();
            },
        },
        "bPaginate": true,// 分頁按鈕
        "sPaginationType": "full_numbers",//用這個參數顯示的頁碼工具比較全 除了"full_numbers"還有‘two_button’
        "columns": [
            {"data": null, "title": "第一列", 'sClass': "text-center", "orderable": false},//data 數據 如果復雜邏輯可以寫在回調fnRowCallback中否則可以直接返回aoData的屬性
            {"data": "properties1.aaa", "title": "第二列", 'sClass': "text-center", "orderable": false},//'sClass': "text-center"居中
            {"data": null, "title": "第三列", 'sClass': "text-center", "orderable": false},//"orderable": false是否可排序（true界面上會有排序按鈕）
            {"data": null, "title": "第四列", 'sClass': "text-center", "orderable": false},
            {"data": "properties2", "title": "第五列", 'sClass': "text-center", "orderable": false},
        ],
        "fnRowCallback": function (nRow, aData) {//注意參數順序不可變
            $result = aData.properties1.aaa+ '<br/>' + aData.properties2;//在這寫單元格里的html代碼
            $('td:eq(0)', nRow).html($result);//在這里分別給1 3 4列賦值
            $('td:eq(2)', nRow).html($result);
            $('td:eq(3)', nRow).html($result);
        }
    });
});

 

2關於ajax傳參

ajax返回的數據實體類按照這個格式就ok

    private Long iTotalRecords;//實際的行數
    private Long iTotalDisplayRecords;//過濾之后，實際的行數
    private Integer draw;//datatables傳過來的參數 原樣返回
    private List<T> aaData;//返回實體

 

想說的都寫在注釋里 不懂的可以參照 http://blog.csdn.net/star535X/article/details/50060427或者問我

么么噠晚安~！