datatables的學習總結

 $(document).ready(function() {

       var oTable= $('#dataTables-example').DataTable({
//            searching : false,//去掉搜索框方法一： 百度上的方法，可是我用這沒管用
//            bFilter: false, //去掉搜索框方法三：這種方法能夠
            bLengthChange: false,   //去掉每頁顯示多少條數據方法
            responsive: true,
            language: {
                "sProcessing": "處理中...",
                "sLengthMenu": "顯示 _MENU_ 項結果",
                "sZeroRecords": "沒有匹配結果",
                "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中數據爲空",
                "sLoadingRecords": "載入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首頁",
                    "sPrevious": "上頁",
                    "sNext": "下頁",
                    "sLast": "末頁"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
           fnServerParams:function(data){ //修改參數

           },

           serverSide: true, //開啓服務器模式
           ajax : function(data, callback,settings) {//ajax配置爲function,手動調用異步查詢

               $.ajax({
                       type : "post",
                       url : "<?=base_url('user/userListData')?>",
                       cache : false, //禁用緩存
                       data : data, //傳入已封裝的參數
                       dataType : "json",
                       success : function(res) {
//                           console.log(res);
//                           callback(res);
                           setTimeout(
                               function() {

                                   //封裝返回數據，這裏僅演示了修改屬性名
                                   var returnData = {};
                                   returnData.draw = res.draw;//這裏直接自行返回了draw計數器,應該由後臺返回
                                   returnData.recordsTotal = res.recordsTotal;
                                   returnData.recordsFiltered = res.recordsFiltered;//後臺不實現過濾功能，每次查詢均視做所有結果
                                   returnData.data = res.data;
                                   //關閉遮罩
                                   //$wrapper.spinModal(false);
                                   //調用DataTables提供的callback方法，表明數據已封裝完成並傳回DataTables進行渲染
                                   //此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
                                   callback(returnData);
                               },
                               200);
                       },
                       error : function(XMLHttpRequest, textStatus,errorThrown) {
                           $.Style.alert('danger','系統錯誤，請稍後再試!');
                       }
                   });
           },
//            data: data,
            columns: [
                { data: "id"  },
                { data: "user_login" },
                { data: "user_sex"  },
                { data: "user_ctime" },
                { data: "user_last_ctime" },
                { data: "user_last_ip" },
                {
                    data : "user_status",
                    render : function(data, type,row) {
                        if (data == 1) {
                            return "正常";
                        } else if(data==2) {
                            return "未驗證";
                        }else{
                            return '禁用';
                        }

                    }
                },
                { data: "" }
            ],
            "columnDefs": [{
                 "targets": [ -1 ],
                 "searchable": false,
                 "orderable": false,
                 "data": null,
                 "defaultContent": "i am not empty",
                 "render": function ( data, type, row ) {
                     console.log(row['id'])
                     return "<a href='+data+' class='btn btn-info btn-xs btn-grad'>編輯</a>";
                 }
           }]
        });

    });

 

 

 $(document).ready(function() {

       var oTable= $('#dataTables-example').DataTable({
//            searching : false,//去掉搜索框方法一： 百度上的方法，可是我用這沒管用
//            bFilter: false, //去掉搜索框方法三：這種方法能夠
bLengthChange: false,   //去掉每頁顯示多少條數據方法
responsive: true,
            language: {
                "sProcessing": "處理中...",
                "sLengthMenu": "顯示 _MENU_ 項結果",
                "sZeroRecords": "沒有匹配結果",
                "sInfo": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                "sInfoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中數據爲空",
                "sLoadingRecords": "載入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首頁",
                    "sPrevious": "上頁",
                    "sNext": "下頁",
                    "sLast": "末頁"
},
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
}
            },
           fnServerParams:function(data){ //修改參數

},

           serverSide: true, //開啓服務器模式
ajax : function(data, callback,settings) {//ajax配置爲function,手動調用異步查詢

$.ajax({
                       type : "post",
                       url : "<?=base_url('user/userListData')?>",
                       cache : false, //禁用緩存
data : data, //傳入已封裝的參數
dataType : "json",
                       success : function(res) {
//                           console.log(res);
//                           callback(res);
setTimeout(
function() {

                                   //封裝返回數據，這裏僅演示了修改屬性名
var returnData = {};
                                   returnData.draw = res.draw;//這裏直接自行返回了draw計數器,應該由後臺返回
returnData.recordsTotal = res.recordsTotal;
                                   returnData.recordsFiltered = res.recordsFiltered;//後臺不實現過濾功能，每次查詢均視做所有結果
returnData.data = res.data;
                                   //關閉遮罩
//$wrapper.spinModal(false);
                                   //調用DataTables提供的callback方法，表明數據已封裝完成並傳回DataTables進行渲染
//此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢
callback(returnData);
                               },
                               200);
                       },
                       error : function(XMLHttpRequest, textStatus,errorThrown) {
                           $.Style.alert('danger','系統錯誤，請稍後再試!');
                       }
                   });
           },
//            data: data,
columns: [
{ data: "id"  },
                { data: "user_login" },
                { data: "user_sex"  },
                { data: "user_ctime" },
                { data: "user_last_ctime" },
                { data: "user_last_ip" },
                {
                    data : "user_status",
                    render : function(data, type,row) {
                        if (data == 1) {
                            return "正常";
                        } else if(data==2) {
                            return "未驗證";
                        }else{
                            return '禁用';
                        }

                    }
                },
                { data: "" }
            ],
            "columnDefs": [{
                 "targets": [ -1 ],
                 "searchable": false,
                 "orderable": false,
                 "data": null,
                 "defaultContent": "i am not empty",
                 "render": function ( data, type, row ) {
                     console.log(row['id'])
return "<a href='+data+' class='btn btn-info btn-xs btn-grad'>編輯</a>";
                 }
           }]
});

    });