待完善。。。现在是整个数据从后台取,要改成每次翻页 ajax请求指定页数数据 。
//JS代码 var table_menu; function InitDataTable() { var url = '@Url.Action("GetList")'; //后台获取json数据的地址 $.fn.dataTableExt.sErrMode = 'throw'; var config = { "processing": true, "bInfo": true, //是否显示是否启用底边信息栏 "sAjaxSource": url, 'autoWidth': true, "sPaginationType": "full_numbers", "oLanguage": { "sProcessing": "请求数据中......", "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "抱歉, 没有找到", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "sSearch": "搜索", "oPaginate": { "sFirst": "<button type=\"button\" class=\"btn btn-primar\" >首页</button>", "sPrevious": "<button type=\"button\" class=\"btn btn-primar\" >上一页</button>", "sNext": "<button type=\"button\" class=\"btn btn-primar\" >后一页</button>", "sLast": "<button type=\"button\" class=\"btn btn-primar\" >尾页</button>" } }, "sZeroRecords": "没有检索到数据", "retrieve": true, "paging": true, "ordering": true, "info": true, "aoColumns": [ { "sClass": "text-center", "mData": "id", "mRender": function (data, type, row) { return '<input type="checkbox" class="checkChild" value="' + data + '" />'; }, "bSortable": false }, { "mData": "id", "sClass": "text-center" }, { "mData": "parentID", "sClass": "text-center" }, { "mData": "type", "sClass": "text-center" }, { "mData": "name", "sClass": "text-center", "bSortable": false }, { "mData": "url", "sClass": "text-center", "bSortable": false }, { "mData": "order", "sClass": "text-center" }, { "mData": "createDateTime", "sClass": "text-center" }, { "sClass": "text-center", //自定义列内容 "mData": "id", "mRender": function (data, type, row) { return "<button type=\"button\" class=\"btn btn-success\" onClick=\"GoToEditMenu(" +data + ")\">编辑</button>"; }, "bSortable": false }, { "sClass": "text-center", //自定义列内容 "mData": "id", "mRender": function (data, type, row) { return "<button type=\"button\" class=\"btn btn-delete\" onClick=\"DeleteMenu(" + data + ")\">删除</button>"; }, "bSortable": false }, ], 'columnDefs': [ { 'targets': 0, 'checkboxes': { 'selectRow': true } } ], 'select': { 'style': 'multi' }, 'order': [[1, 'asc']] }; table_menu = $("#table_menu").dataTable(config); } //HTML <table class="table table-striped table-hover" id="table_menu"> <thead> <tr> <th> <input type="checkbox" class="checkAll" /> </th> <th>Id</th> <th>上级菜单Id</th> <th>类型</th> <th>名称</th> <th>URL地址</th> <th>排序</th> <th>创建时间</th> <th>编辑</th> <th>删除</th> </tr> </thead> <tbody></tbody> </table>
json数据格式
{ "aaData": [ { "name": "菜单1哦", "parentID": 0, "id": "1", "createDateTime": "2017/12/19 12:30:32", "type": "0", "url": "asdasdd", "order": 2 }, { "name": "菜单1-child", "parentID": 1, "id": "2", "createDateTime": "2017/12/19 12:30:42", "type": "0", "url": "阿德飒飒打撒打撒", "order": 3 } ] } //对应的后台代码 [HttpGet] public IActionResult GetList() { var data = _menuService.GetList(); var strData = data.data.Select(d => new { name = d.Name, parentID = d.ParentId, id = d.Id.ToString(), createDateTime = d.CreateDateTime.ToString(), type=d.TypeName, url = d.Url, order=d.Order }); var result = Json(new { aaData = strData }); return result; } }
另外如果想刷新Datatables的话 需要再定义个扩展方法
//add this plug in //you can call the below function to reload the table with current state //Datatables刷新方法 //oTable.fnReloadAjax(oTable.fnSettings()); $.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings) { //oSettings.sAjaxSource = sNewSource; this.fnClearTable(this); this.oApi._fnProcessingDisplay(oSettings, true); var that = this; $.getJSON(oSettings.sAjaxSource, null, function (json) { /* Got the data - add it to the table */ for (var i = 0; i < json.aaData.length; i++) { that.oApi._fnAddData(oSettings, json.aaData[i]); } oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); that.fnDraw(that); that.oApi._fnProcessingDisplay(oSettings, false); }); } //调用方式 table.fnReloadAjax(table.fnSettings()); //刷新datatable