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