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

    });
  • 相关阅读:
    springboot+swagger生成api文档
    字符串格式化
    Navicat过期
    网页版的支付宝授权登录(vue+java)
    window,sts安装python
    PageHelper分页+排序
    android那些事之Bitmap、InputStream、Drawable、byte[]、Base64之间的转换关系
    两种解析JSON的方法
    蓝牙那些事之远程设备
    蓝牙那些事之状态监听
  • 原文地址:https://www.cnblogs.com/myvic/p/7597214.html
Copyright © 2020-2023  润新知