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"},