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





posted @ 2015-12-22 15:29  Adming  阅读(2119)  评论(0)    收藏  举报