Jquery.Datatables的使用.Net Core Mvc中

发布于 2017-12-20  208 次阅读


待完善。。。现在是整个数据从后台取,要改成每次翻页 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

LoneKing