ASP.NET MVC 使用 Datatables (2)

ASP.NET MVC 使用 Datatables (2)

在服務器端實現分頁，排序，獲取當前頁面數據

在上篇的基礎上進行改造(datatables的客戶端實現)

一、修改View頁面代碼以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

< div   class="row">      < div   class="col-md-12">          < div   class="panel panel-primary" id="list-panel">              < div   class="panel-heading">                  < h1   class="panel-title">Assets</ h1 >              </ div >              < div   class="panel-body">                  < table   id="assets-data-table" class="table table-striped table-bordered" style="width:100%">                    </ table >              </ div >          </ div >      </ div > </ div > @section Scripts {      < script   type="text/javascript">          var assetListVM;          $(document).ready(function () {              assetListVM = {                  dt:null,                  init: function () {                      dt = $("#assets-data-table").DataTable({                          "serverSide": true,                          "proccessing": true,                          "ajax": {                              "url":"@Url.Action("Get","Asset")"                          },                          "columns": [                              { "title": "Bar Code", "data": "Barcode", "searchable": true },                              { "title": "Manufacturer", "data": "Manufacturer", "searchable": true },                              { "title": "Model", "data": "ModelNumber", "searchable": true },                              { "title": "Building", "data": "Building", "searchable": true },                              { "title": "Room No", "data": "RoomNo" },                              { "title": "Quantity", "data": "Quantity" }                          ],                          "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],                          "language": {                              "processing": "處理中...",                              "lengthMenu": "顯示 _MENU_ 項結果",                              "zeroRecords": "沒有匹配結果",                              "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",                              "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",                              "infoFiltered": "(由 _MAX_ 項結果過濾)",                              "infoPostFix": "",                              "search": "搜索:",                              "searchPlaceholder": "搜索...",                              "url": "",                              "emptyTable": "表中數據爲空",                              "loadingRecords": "載入中...",                              "infoThousands": ",",                              "paginate": {                                  "first": "首頁",                                  "previous": "上頁",                                  "next": "下頁",                                  "last": "末頁"                              },                              "aria": {                                  paginate: {                                      first: '首頁',                                      previous: '上頁',                                      next: '下頁',                                      last: '末頁'                                  },                                  "sortAscending": ": 以升序排列此列",                                  "sortDescending": ": 以降序排列此列"                              },                              "decimal": "-",                              "thousands": ","                          }                      });                  }              };              assetListVM.init();          });      </ script > }

二、添加服務端必須的組件：

　　A:Install-Package datatables.mvc5

　　B:Install-Package System.Linq.Dynamic　　

三、添加服務器端方法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

public   ActionResult Get([ModelBinder( typeof (DataTablesBinder))] IDataTablesRequest requestModel)          {              IQueryable<Asset> query = dbContext.Assets;              var   totalcount = query.Count();                #region Filtering              if   (requestModel.Search.Value!= string .Empty)              {                  var   value = requestModel.Search.Value.Trim();                  query = query.Where(p => p.Barcode.Contains(value) ||                                           p.Manufacturer.Contains(value) ||                                           p.ModelNumber.Contains(value) ||                                           p.Building.Contains(value)                                      );              }                var   filteredCount = query.Count();              #endregion                #region Sorting              var   sortedColumns = requestModel.Columns.GetSortedColumns();              var   orderByString =  string .Empty;              foreach   ( var   column  in   sortedColumns)              {                  orderByString += orderByString !=  string .Empty ?  ","   :  "" ;                  orderByString += (column.Data) + (column.SortDirection == Column.OrderDirection.Ascendant? " asc" : " desc" );              }                query = query.OrderBy(orderByString ==  string .Empty ?  " Barcode asc"   : orderByString);                  #endregion              //Paging              query = query.Skip(requestModel.Start).Take(requestModel.Length);                var   data = query.Select(asset=> new              {                   AssetID=asset.AssetID,                  Barcode=asset.Barcode,                  Manufacturer=asset.Manufacturer,                  ModelNumber=asset.ModelNumber,                  Building=asset.Building,                  RoomNo=asset.RoomNo,                  Quantity=asset.Quantity              }).ToList();                return   Json( new   DataTablesResponse(requestModel.Draw, data, filteredCount, totalcount), JsonRequestBehavior.AllowGet);          }

四、運行程序，查看結果

　　

來源： http://www.javashuo.com/article/p-feqjkpic-n.html

來自爲知筆記(Wiz)