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

});
原文地址:https://www.cnblogs.com/myvic/p/7597214.html