官方datatables使用方法

  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加按钮

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345