美文网首页
官方datatables使用方法

官方datatables使用方法

作者: 河工狗之王二狗 | 来源:发表于2018-09-05 10:15 被阅读0次
    1. 引入datatables的css和js。
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/DataTables/media/css/jquery.dataTables.css">
    <script src="${pageContext.request.contextPath}/resources/DataTables/media/js/jquery.dataTables.js"></script>
    
    1. html如下所示
    <table id="teaListTable">
        <thead>
            <tr>
                <th><input id="checkall" type="checkbox" onclick="checkall()"/></th>
                <th>教工号</th>
                <th>姓名</th>
                <th>头像</th>
                <th>所属单位</th>
                <th>职称</th>
                <th>账号状态</th>
                <th>文化程度</th>
                <th>操作</th>
            </tr>
        </thead>
    </table>
    
    1. 初始化datatables
    //先定义数据,接下来datatables的数据就是它
    var data = [{
        "ORG_NAME": "少年班学院(少年班、教改试点班)",
        "ID": "P0460",
        "PHOTO": "1536110909345tx.jpg",
        "V2_RN": "1",
        "IS_ACTIVE": "1",
        "JOB_NUM": "1111",
        "NAME": "齐莹"
    }, {
        "ORG_NAME": "少年班学院(少年班、教改试点班)",
        "ID": "P0324",
        "V2_RN": "2",
        "IS_ACTIVE": "1",
        "JOB_NUM": "1111",
        "NAME": "唐宁"
    },];
    
    • 真分页写法
    $('#teaListTable').DataTable({
               // "dom": 'l <"div.toolbar"> tip',
                "stateSave": true,
                "searching" : false,
                "ordering": false,
                "destroy" : true,
                "processing": true,
                "serverSide": true,//服务器端分页
                "ajax": {
                    "type": "POST",
                    "url": "${pageContext.request.contextPath}/baseinfo/getTeacherList",
                    "data":{
                        "teaName":teaName,
                        "orgId":currentId,
                        "userNum":userNum,
                        "cardNum":cardNum,
                    },
                    "dataSrc": function (result) {
                        return result.data;
                    }
                },
                "columns" : [{
                    data : null
                },{
                    data : "JOB_NUM"
                },{
                    data : "NAME"
                },{
                    data : null
                },{
                    data : "ORG_NAME"
                },{
                    data : null
                },{
                    data : null
                },{
                    data : null
                },{
                    data : null
                }],
                "columnDefs": [
                    {
                        "render" : function(data, type, row, meta){
                            var html = '<input type="checkbox" class="check_js" data-id="'+'\''+row.ID+'\''+'"/>';
                            return html;
                        },
                        "targets" : 0
                    },
                    {
                        "render" : function(data, type, row, meta){
                            var html = "";
                            if(row.PHOTO){
                                html =
                                    '<img src="${pageContext.request.contextPath}/UserFiles/photo/'+row.PHOTO+'" width="40px" height="40px"/>';
                            }else{
                                html = "";
                            }
                            return html;
                        },
                        "targets" : 3
                    },
                    {
                        "render" : function(data, type, row, meta){
                            if(data.TEA_ZCDictName){
                                return data.TEA_ZCDictName == "教师职称"?"":data.TEA_ZCDictName;
                            }else{
                                return "";
                            }
    
                        },
                        "targets" : 5
                    },
                    {
                        "render" : function(data, type, row, meta){
                            if(data.WHCDDictName){
                                return data.WHCDDictName == "文化程度"?"":data.WHCDDictName;
                            }else{
                                return "";
                            }
    
                        },
                        "targets" : 7
                    },
                    {
                        "render" : function(data, type, row, meta){
                            return data.IS_ACTIVE == 0?"未激活":"已激活";
                        },
                        "targets" : 6
                    },
                    {
                        "render" : function(data, type, row, meta){
                            var html = '<a href="javascript:void(0)" onclick="openEditModel('+'\''+row.ID+'\''+')">修改</a>';//加单引号
                            //var html = '<a href="javascript:void(0)" onclick="openEditModel(\''+row.ID+'\')">修改</a>';//转义
                            return html;
    
                        },
                        "targets" : 8
                    },
                    {
                        "render" : function(data, type, row, meta){
                            if(typeof data == "undefined") {
                                return '';
                            }
                            return data;
                        },
                        "targets" : [0,1,2,3,4,5,6,7,8]
                    }
                ],
                language : {
                    "processing" : "处理中...",
                    "lengthMenu" : "显示 _MENU_ 项结果",
                    "zeroRecords" : "没有匹配结果",
                    "info" : "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
                    "infoEmpty" : "显示第 0 至 0 项结果,共 0 项",
                    "infoFiltered" : "(由 _MAX_ 项结果过滤)",
                    "infoPostFix" : "",
                    "search" : "搜索:",
                    "url" : "",
                    "emptyTable" : "没有数据",
                    "loadingRecords" : "载入中...",
                    "infoThousands" : "20",
                    "paginate" : {
                        "first" : "首页",
                        "previous" : "上页",
                        "next" : "下页",
                        "last" : "末页"
                    }
                }
            });
    
    • 假分页写法(尽量不要用这种方法了,直接把serverSide改为false即可)
    $('#teaListTable').DataTable({
                        /* "dom": '<"toolbar">frtip', */
                        data:data,
                        "ordering": false,
                        destroy : true,
                       "columns" : [{
            data : null
        },{
            data : "courseName"
        },{
            data : "questionType"
        },{
            data : "degree"
        },{
            data : "questionName"
        },{
            data : "option"
        },{
            data : "answer"
        },{
            data : "addTime"
        },{
            data : null
        }],
        "columnDefs": [
            {
                "render" : function(data, type, row, meta){
                    var html = '<input type="checkbox" class="check_js" data-id="'+'\''+row.id+'\''+'"/>';
                    return html;
                },
                "targets" : 0
            },
            {
                "render" : function(data, type, row, meta){
                    var html ='';
                    if(row.questionType == '1'){
                        html ='选择题';
                    }else if(row.questionType == '2'){
                        html ='判断题';
                    }
                    return html;
                },
                "targets" : 2
            },
            {
                "render" : function(data, type, row, meta){
                    var html ='';
                    if(row.degree == '1'){
                        html ='简单';
                    }else if(row.degree == '2'){
                        html ='一般';
                    }else if(row.degree == '3'){
                        html ='中等';
                    }else if(row.degree == '4'){
                        html ='困难';
                    }
                    return html;
                },
                "targets" : 3
            },
            {
                "render" : function(data, type, row, meta){
                    if(row.questionType == '1'){
                        var html ='A:' + row.optionA + ',B:' + row.optionB + ',C:' + row.optionC + ',D:' + row.optionD;
                    }else{
                        var html ='';
                    }
                    return html;
                },
                "targets" : 5
            },
            {
                "render" : function(data, type, row, meta){
                    var html ='';
                    if(row.answer == '1'){
                        html ='正确';
                    }else if(row.answer == '0'){
                        html ='错误';
                    }else{
                        html = row.answer;
                    }
                    return html;
                },
                "targets" : 6
            },
            {
                "render" : function(data, type, row, meta){
                    var html =
                        '<a href="${pageContext.request.contextPath}/examQuestionsMgr/getExamQuestionDetail?questionsId='+'\''+row.id+'\''+'" class="ops">修改</a>' +
                        '<a onclick="deleteExamQuestion('+'\''+row.id+'\''+')" class="ops" style="margin-left: 5px">删除</a>';
                    return html;
                },
                "targets" : 8
            },
            {
                "render" : function(data, type, row, meta){
                    if(typeof data == "undefined") {
                        return '';
                    }
                    return data;
                },
                "targets" : [0,1,2,3,4,5,6,7,8]
            }
        ],
        language : {
            "processing" : "处理中...",
            "lengthMenu" : "显示 _MENU_ 项结果",
            "zeroRecords" : "没有匹配结果",
            "info" : "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
            "infoEmpty" : "显示第 0 至 0 项结果,共 0 项",
            "infoFiltered" : "(由 _MAX_ 项结果过滤)",
            "infoPostFix" : "",
            "search" : "搜索:",
            "url" : "",
            "emptyTable" : "没有数据",
            "loadingRecords" : "载入中...",
            "infoThousands" : "20",
            "paginate" : {
                "first" : "首页",
                "previous" : "上页",
                "next" : "下页",
                "last" : "末页"
            }
        }
    });
    
    1. 完成

    楼主引用了别的样式datatables-theme.css,才是下面这样,要不然会丑一丢丢

    成果展示
    1. 注意事项

    1.因为使用的jquery(在后面简称jq)的datatables,所以在之前一定要引用jq。同理,使用各种jq插件之前都要引入jq,否则就会报错如下(在这里我用的jq版本是jquery-2.1.1.min.js):

    未引入jq引发的错误

    2.如何在datatables上加按钮

    • 在初始化的时候加这条属性
    "dom": 'l <"div.toolbar"> tip',
    
    • 在初始化后渲染dom
    $("div.toolbar").html('&nbsp;<button type="button" class="layui-btn layui-btn-normal" onclick="toAddPage()" style="height:32px;line-height:32px">新增</button>' +
                '&nbsp;<button type="button" class="layui-btn layui-btn-danger" onclick="delType()" style="height:32px;line-height:32px">删除</button>');
            $("div.toolbar").append('&nbsp;<button type="button" class="layui-btn layui-btn-normal" onclick="changeManyPower()" style="height:32px;line-height:32px">批量修改权限</button>');
    
    
    • 展示


      datatables加按钮

      有问题随时留言!看到就改!么么哒!

    相关文章

      网友评论

          本文标题:官方datatables使用方法

          本文链接:https://www.haomeiwen.com/subject/whvowftx.html