• JQuery Datatables服务器端处理示例

    HTML
    1. <table class="table table-striped table-bordered table-hover" id="table_report">
    2.     <thead>
    3.         <tr role="row">
    4.             <th class="table-checkbox">
    5.                 选择
    6.             </th>
    7.             <th>图片</th>
    8.             <th>商品名称</th>
    9.             <th>商品编码</th>
    10.             <th>商品类型</th>
    11.             <th>价格</th>
    12.             <th>会员价格</th>
    13.         </tr>
    14.     </thead>
    15.     <tbody></tbody>
    16.     <tfoot>
    17.         <tr role="row">
    18.             <th class="table-checkbox">
    19.                 <input type="checkbox" class="group-checkable" data-set="#table_report .checkboxes" />
    20.             </th>
    21.             <th>图片</th>
    22.             <th>商品名称</th>
    23.             <th>商品编码</th>
    24.             <th>商品类型</th>
    25.             <th>价格</th>
    26.             <th>会员价格</th>
    27.         </tr>
    28.     </tfoot>
    29. </table>

    javascript
    1.     <script type="text/javascript">
    2.         $(function () {
    3.             var table = $('#table_report');
    4.             var oTable = table.dataTable({
    5.                 "processing": true,
    6.                 "serverSide": true,
    7.                 //"stateSave": true, // save datatable state(pagination, sort, etc) in cookie.
    8.                 "pagingType": "bootstrap_full_number",
    9.                 "language": {
    10.                     "aria": {
    11.                         "sortAscending": ": 以升序排列此列",
    12.                         "sortDescending": ": 以降序排列此列"
    13.                     },
    14.                     "loadingRecords": "数据载入中...",
    15.                     "emptyTable": "表中数据为空",
    16.                     "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
    17.                     "infoEmpty": "无数据",
    18.                     "infoFiltered": "(由 _MAX_ 项过滤得到)",
    19.                     "infoPostFix": "",
    20.                     "infoThousands": ",",
    21.                     "lengthMenu": "显示 _MENU_ 项结果",
    22.                     "search": "搜索:",
    23.                     "zeroRecords": "没有匹配结果",
    24.                     "paging": {
    25.                         "first": "首页",
    26.                         "previous": "上页",
    27.                         "next": "下页",
    28.                         "last": "末页"
    29.                     },
    30.                     "paginate": {
    31.                         "previous": "上一页",
    32.                         "next": "下一页",
    33.                         "last": "尾页",
    34.                         "first": "首页"
    35.                     }
    36.                 },
    37.                 "ajax": {
    38.                     url: "/DiscountInfo/DiscountGoodList/" + $("#GoodId").val(),
    39.                     contentType: "application/json",
    40.                     type: "POST",
    41.                     data: function (d) {
    42.                         var x = JSON.stringify(d);
    43.                         //console.log(x);
    44.                         return x;
    45.                     },
    46.                 },
    47.                 "columns": [
    48.                     {
    49.                         "data": "Id", "render": function (data, type, full, meta) {
    50.                             return '<input type="checkbox" class="checkboxes" value="' + data + '"/>';
    51.                         }
    52.                     },
    53.                     { "data": "ImgPath", "name": "图片", "orderable": false ,"render": function (data, type, full, meta) {
    54.                         return '<img src="' + data + '" height="48" width="48" onerror="errorProImg(this)"></img>';
    55.                     }},
    56.                     { "data": "ProName", "name": "商品名称", "orderable": true },
    57.                     { "data": "ProNumber", "name": "商品编码", "orderable": true },
    58.                     { "data": "CategoryTypeName", "name": "商品类型", "orderable": true },
    59.                     { "data": "OrdinaryPrice", "name": "价格", "orderable": true },
    60.                     { "data": "VipPrice", "name": "会员价格", "orderable": true }],
    61.                 "rowCallback": function (row, data) {
    62.                     $(row).find("input").uniform();
    63.                     if (data.Selected) {
    64.                         $(row).addClass('active').find("input").attr("checked", true);
    65.                     } else { }
    66.                     $.uniform.update();
    67.                 },
    68.                 "lengthMenu": [
    69.                     [20, 50, 100],
    70.                     [20, 50, 100] // change per page values here
    71.                 ],
    72.                 // set the initial value
    73.                 "pageLength": 20,
    74.                 //"columnDefs": [{  // set default column settings
    75.                 //    'targets': [0],
    76.                 //    "searchable": false,
    77.                 //    'orderable': false
    78.                 //}],
    79.                 "order": [
    80.                     [0, "desc"]// set first column as a default sort by asc
    81.                 ]
    82.             });
    84.             //单项操作
    85.             table.on('change', 'tbody tr .checkboxes', function () {
    86.                 var checked = $(this).is(":checked");
    87.                 if (checked) {
    88.                     $(this).parents('tr').addClass("active");
    89.                     $.post("/DiscountInfo/UpdateDiscountGoodList", { GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": true }, function () { });
    90.                 } else {
    91.                     $(this).parents('tr').removeClass("active");
    92.                     $.post("/DiscountInfo/UpdateDiscountGoodList", { GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": false }, function () { });
    93.                 }
    94.             });
    96.             //多项操作
    97.             table.find('.group-checkable').on("change", function () {
    98.                 var set = $(this).attr("data-set");
    99.                 var checked = $(this).is(":checked");
    100.                 var list = [];
    101.                 $(set).each(function () {
    102.                     if (checked) {
    103.                         $(this).attr("checked", true);
    104.                         $(this).parents('tr').addClass("active");
    106.                         list.push({ GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": true });
    107.                     } else {
    108.                         $(this).attr("checked", false);
    109.                         $(this).parents('tr').removeClass("active");
    111.                         list.push({ GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": false });
    112.                     }
    113.                 });
    114.                 $.uniform.update(set);
    115.                 $.post("/DiscountInfo/UpdateDiscountGoodLists", { "list": list }, function () { });
    116.             });
    117.         });
    118.     </script>

    Service/asp.net mvc
    1. [HttpPost]
    2. public JsonResult DiscountGoodList(Guid id,datatables table)
    3. {
    4.     int total = 0;
    5.     var goods = productsService.GetList();
    6.     var dGoods = discountgoodsService.GetList().Where(c => c.Deleted == false && c.RuleId == id);
    8.     var query = from g in goods
    9.                 join t in categoryTypeServic.GetList() on g.CategoryTypeId equals t.Id
    10.                 join dg in dGoods on g.Id equals dg.GoodsId into joinDG
    11.                 from dept in joinDG.DefaultIfEmpty()
    12.                 select new GoodListItemViewModel
    13.                 {
    14.                     Id = g.Id,
    15.                     ImgPath = g.ImgPath,
    16.                     ProName = g.ProName,
    17.                     ProNumber = g.ProNumber,
    18.                     VipPrice = g.VipPrice,
    19.                     OrdinaryPrice = g.OrdinaryPrice,
    20.                     CategoryTypeId = g.CategoryTypeId,
    21.                     Selected = dept == null ? false : true,
    22.                     CategoryTypeName = t.TypeName
    23.                 };
    25.     //数据总数（未过滤）
    26.     total = query.Count();
    28.     //搜索过滤
    29.     if (string.IsNullOrWhiteSpace(table.search.value) == false)
    30.     {
    31.         query = query.Where(c=>c.ProName.Contains(table.search.value) || c.ProNumber.Contains(table.search.value) || c.CategoryTypeName.Contains(table.search.value));
    32.     }
    34.     #region 排序
    35.     query = query.OrderBy(c => c.Id);
    36.     foreach (var item in table.order)
    37.     {
    38.         if (item.dir == "asc")
    39.         {
    40.             switch (item.column)
    41.             {
    42.                 case 0:
    43.                     query = query.OrderBy(c => c.Selected);
    44.                     break;
    45.                 case 2:
    46.                     query = query.OrderBy(c => c.ProName);
    47.                     break;
    48.                 case 3:
    49.                     query = query.OrderBy(c => c.ProNumber);
    50.                     break;
    51.                 case 4:
    52.                     query = query.OrderBy(c => c.CategoryTypeName);
    53.                     break;
    54.                 case 5:
    55.                     query = query.OrderBy(c => c.OrdinaryPrice);
    56.                     break;
    57.                 case 6:
    58.                     query = query.OrderBy(c => c.VipPrice);
    59.                     break;
    60.                 default:
    61.                     query = query.OrderBy(c => c.Selected);
    62.                     break;
    63.             }
    64.         }
    65.         else {
    66.             switch (item.column)
    67.             {
    68.                 case 0:
    69.                     query = query.OrderByDescending(c => c.Selected);
    70.                     break;
    71.                 case 2:
    72.                     query = query.OrderByDescending(c => c.ProName);
    73.                     break;
    74.                 case 3:
    75.                     query = query.OrderByDescending(c => c.ProNumber);
    76.                     break;
    77.                 case 4:
    78.                     query = query.OrderByDescending(c => c.CategoryTypeName);
    79.                     break;
    80.                 case 5:
    81.                     query = query.OrderByDescending(c => c.ProName);
    82.                     break;
    83.                 case 6:
    84.                     query = query.OrderByDescending(c => c.ProNumber);
    85.                     break;
    86.                 default:
    87.                     query = query.OrderByDescending(c => c.Selected);
    88.                     break;
    89.             }
    90.         }
    91.     } 
    92.     #endregion
    94.     DatatablesResult<GoodListItemViewModel> jsModel = new DatatablesResult<GoodListItemViewModel>(query, table.start, table.length, table.draw, total);
    96.     return Json(jsModel);
    97. }
    98. 		
    99. 		
    100. 		
    101. public class datatables
    102. {
    103.     public datatables()
    104.     {
    105.         this.columns = new List<datatables_column>();
    106.         this.order = new List<datatables_order>();
    107.     }
    109.     public int draw { get; set; }
    110.     public List<datatables_column> columns { get; set; }
    111.     /// <summary>
    112.     /// 排序
    113.     /// </summary>
    114.     public List<datatables_order> order { get; set; }
    115.     /// <summary>
    116.     /// 数据开始位置，从0开始
    117.     /// </summary>
    118.     public int start { get; set; }
    119.     /// <summary>
    120.     /// 分页大小，-1代表不分页全部返回
    121.     /// </summary>
    122.     public int length { get; set; }
    123.     /// <summary>
    124.     /// 全局的搜索条件
    125.     /// </summary>
    126.     public datatables_search search { get; set; }
    127. }
    129. public class datatables_column
    130. {
    131.     public int data { get; set; }
    132.     public string name { get; set; }
    133.     public bool searchable { get; set; }
    134.     public bool orderable { get; set; }
    135.     public datatables_search search { get; set; }
    136. }
    138. public class datatables_search
    139. {
    140.     public string value { get; set; }
    141.     public string regex { get; set; }
    142. }
    144. public class datatables_order
    145. {
    146.     public int column { get; set; }
    147.     public string dir { get; set; }
    148. }
    149. 	
    150. 	
    151. public class DatatablesResult<T>
    152. {
    153.     public DatatablesResult(IQueryable<T> source, int start, int length, int draw, int recordsTotal)
    154.     {
    155.         this.draw = draw;
    156.         this.recordsTotal = recordsTotal;
    157.         this.recordsFiltered = source.Count();
    158.         this.data = source.Skip(start).Take(length).ToList();
    159.     }
    161.     public DatatablesResult(IList<T> source, int start, int length, int draw, int recordsTotal)
    162.     {
    163.         this.draw = draw;
    164.         this.recordsTotal = recordsTotal;
    165.         this.recordsFiltered = source.Count();
    166.         this.data = source.Skip(start).Take(length).ToList();
    167.     }
    168.     public DatatablesResult(IEnumerable<T> source, int start, int length, int draw, int recordsTotal)
    169.     {
    170.         this.draw = draw;
    171.         this.recordsTotal = recordsTotal;
    172.         this.recordsFiltered = source.Count();
    173.         this.data = source.Skip(start).Take(length).ToList();
    174.     }
    175.     public DatatablesResult(IEnumerable<T> source, int recordsFiltered, int draw, int recordsTotal)
    176.     {
    177.         this.draw = draw;
    178.         this.recordsTotal = recordsTotal;
    179.         this.recordsFiltered = recordsFiltered;
    180.         this.data = source.ToList();
    181.     }
    183.     public int draw { get; /*private*/  set; }
    184.     public int recordsTotal { get; /*private*/  set; }
    185.     public int recordsFiltered { get; /*private*/  set; }
    186.     public IList<T> data { get; /*private*/ set; }
    187. }

    最终效果图



    参考资料
    datatables.js 简单使用--多选框和服务器端分页 http://www.cnblogs.com/lanshanke/p/5058865.html
     服务器处理(Server-side processing) http://datatables.club/manual/server-side.html
  • 相关阅读:
    ASP.NET MVC 5 入门（10）：添加验证
    ASP.NET MVC 5 入门（09）：添加新字段
    MVC5与EF6结合教程（06）：创建更复杂的数据模型
    MVC5与EF6结合教程（05）：Code First 迁移和部署
    ASP.NET MVC 5 入门（08）：添加搜索方法和搜索视图
    ASP.NET MVC 5 入门（07）：检查 Edit 方法和编辑视图
    微信小程序入门1：准备
    MVC5与EF6结合教程（04）：连接复原和命令截获
    ASP.NET MVC 5 入门（06）：控制器访问模型的数据
    ASP.NET MVC 5 入门（05）：创建连接字符串并使用 SQL Server LocalDB
  • 原文地址：https://www.cnblogs.com/weapon/p/5066816.html
Copyright © 2020-2023  润新知