jquery DataTable 的demo

1.文件引入：css文件和js文件

<linkrel="stylesheet" type="text/css"href="/libs/dataTable/css/dataTables.bootstrap.css"/>

<script type="text/javascript" src="/libs/dataTable/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/libs/dataTable/js/dataTables.bootstrap.min.js"></script>

2.已经获取好的数据进行table加载    （data为全局变量，是一个对象数组，数组的参数对应每一列的数据）

$("#MeetingVideoList").DataTable({
    'bPaginate': true,
    "bProcessing": true,
    "searching": false,
    "autoWidth": true,
    'bLengthChange': false,
    'fnDrawCallback': function() {                 //当table加载完成后执行的函数
        $("#MeetingVideoList").find(".dataTables_empty").parent().remove();            
        var addRow = 10 - $("#MeetingVideoList tbody tr").length;
        for (var i = 0; i < addRow; i++) {
            $("#MeetingVideoList").append("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");          //页面不满10行，补全至10行
        }
        /*if ($("#MeetingVideoList_wrapper .row:nth-child(3)").find('.jumpPage').length < 1) {
            $("#MeetingVideoList_wrapper .row:nth-child(3)").append('<div class="jumpPage" style="display:inline-block;"> <p>跳转至</p> <input id="page" style="width:50px;display: inline-block;"> <p>页</p> <button class="btn btn-primary" id="jump">跳转</button> </div>');
        }
        $("#jump").unbind().click(function() {
            var page = $("#page").val() - 1;
            $("#MeetingVideoList").dataTable().fnPageChange(page);
        })*/                   //跳转页面功能的实现
    },
    /*"bSort": true,*/
    "aaSorting": [4, "DESC"],
    "destroy": true, //重新reload
    "sPaginationType": "full_numbers",
    "bAutoWidth": false, //自适应宽度
    "data": data,
    "aoColumnDefs": [{ "bVisible": true, "aTargets": [0]}, { "bSortable": false, "aTargets": [5] }],//隐藏列
    "columns": [
        {"data": "videoId"},
        {"data": function(e) {
            return "<span title='" + e.meetingName + "'>" + e.meetingName + "</span>";
        }},
        {"data": function(e) {
            return "<span title='" + e.videoName + "'>" + e.videoName + "</span>";
        }},
        {"data": function(e) {
            return "<span title='" + e.recordPerson + "'>" + e.recordPerson + "</span>";
        }} ,
        {"data": "recordTime"},
        {
            "data": function (e) {
                if (e.videoId != '') {
                    return '<i title="修改" class="fa fa-pencil btn_lg edit"></i>'+
                        '<i  title="删除"  class="fa fa-remove btn_lg btn_lg_margin del"></i>'+
                        '<i  title="下载" class="fa fa-download btn_lg btn_lg_margin download"></i><input type="hidden" value="' + e.power + '">';
                }
                return '';
            }
        }
    ],
    'language': {
        'emptyTable': '记录数为0',
        'loadingRecords': '加载中...',
        'processing': '查询中...',
        'search': '搜索:',
        'lengthMenu': '每页 _MENU_ 条记录',
        'zeroRecords': '记录数为0',
        'paginate': {
            'first': '首页',
            'next': '下一页',
            'previous': '上一页',
            'last': '尾页'
        },
        'info': '当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录',
        'infoEmpty': '记录数为0',
        'infoFiltered': '(从 _MAX_ 条记录中筛选)'
    }
});

3.数组以ajax的形式获取（用下面的内容代替上面的 "data" : data即可）

'ajax':{
    url: '/service/getUserList3',
    type: 'post',
    dataType: 'json',
    data: {
        sLoginName: $("#SloginName").val(),
        sName: $("#Sname").val(),
        sUse: $("#Suseful").val()
    },
    "dataSrc": "userList"
},