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>";
                 }
           }]
});

    });