首页 > 编程 > .NET > 正文

ASP.Net MVC+Data Table实现分页+排序功能的方法

2024-07-10 12:49:09
字体:
来源:转载
供稿:网友

本文实例讲述了ASP.Net MVC+Data Table实现分页+排序功能的方法。,具体如下:

实现思路:

使用datatable内置的分页,排序
使用attribute+反射来控制需要排序和显示的字段以及顺序
分离排序和显示逻辑
若要添加搜索逻辑只需要传递搜索的字段到后端即可(js初始化时把"searching": false拿掉)。

View :

@using BCMS.BusinessLogic@using BCMS.BusinessLogic.Models@model List<BusCaptainObj><table id="tblData" class="table table-striped">  <thead>    <tr class="data-list">      <th style="width:10%;">@Html.DisplayNameFor(model => model.First().PersNo)</th>      <th style="width:30%;">@Html.DisplayNameFor(model => model.First().Personnel_Name)</th>      <th style="width:20%;">@Html.DisplayNameFor(model => model.First().Position)</th>      <th style="width:20%;">@Html.DisplayNameFor(model => model.First().Interchange)</th>      <th style="width:20%;">Action</th>    </tr>  </thead></table>@section scripts {  <script type="text/javascript">     @{       var columns = DataTableHelper.DisplayColumns<BusCaptainObj>();     }    $(document).ready(function () {      $('#tblData').dataTable({        "processing": true,        "serverSide": true,        "searching": false,        "stateSave": true,        "oLanguage": { "sInfoFiltered": "" },        "ajax": {          "url": @Url.Action("GetJsonData"),          "type": "GET"        },        "columns": [          { "data": "@columns[0]" },          { "data": "@columns[1]" },          { "data": "@columns[2]" },          { "data": "@columns[3]" },          {            "data": "@columns[0]",            "orderable": false,            "searchable": false,            "render": function (data, type, full, meta) {              if (type === 'display') {                return GetDetailButton("/BusCaptain/Detail?bcId=", data) + GetInfoButton("/Telematics?bcId=", data, "Performance");              } else { return data; }            }          }        ],        "order": [[0, "asc"]]      });    });  </script>}

Controller :

public ActionResult GetJsonData(int draw, int start, int length){  string search = Request.QueryString[DataTableQueryString.Searching];  string sortColumn = "";  string sortDirection = "asc";  if (Request.QueryString[DataTableQueryString.OrderingColumn] != null)  {    sortColumn = GetSortColumn(Request.QueryString[DataTableQueryString.OrderingColumn]);  }  if (Request.QueryString[DataTableQueryString.OrderingDir] != null)  {    sortDirection = Request.QueryString[DataTableQueryString.OrderingDir];  }  DataTableData dataTableData = new DataTableData();  dataTableData.draw = draw;  int recordsFiltered = 0;  dataTableData.data = BusCaptainService.Instance.SearchMyBuscaptains(User.Identity.Name, out recordsFiltered, start, length, sortColumn, sortDirection, search).Data;  dataTableData.recordsFiltered = recordsFiltered;  return Json(dataTableData, JsonRequestBehavior.AllowGet);}public string GetSortColumn(string sortColumnNo){  var name = DataTableHelper.SoringColumnName<BusCaptainObj>(sortColumnNo);  return name;}public class DataTableData{  public int draw { get; set; }  public int recordsFiltered { get; set; }  public List<BusCaptainObj> data { get; set; }}            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表