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. });
  83. //单项操作
  84. table.on('change', 'tbody tr .checkboxes', function () {
  85. var checked = $(this).is(":checked");
  86. if (checked) {
  87. $(this).parents('tr').addClass("active");
  88. $.post("/DiscountInfo/UpdateDiscountGoodList", { GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": true }, function () { });
  89. } else {
  90. $(this).parents('tr').removeClass("active");
  91. $.post("/DiscountInfo/UpdateDiscountGoodList", { GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": false }, function () { });
  92. }
  93. });
  94. //多项操作
  95. table.find('.group-checkable').on("change", function () {
  96. var set = $(this).attr("data-set");
  97. var checked = $(this).is(":checked");
  98. var list = [];
  99. $(set).each(function () {
  100. if (checked) {
  101. $(this).attr("checked", true);
  102. $(this).parents('tr').addClass("active");
  103. list.push({ GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": true });
  104. } else {
  105. $(this).attr("checked", false);
  106. $(this).parents('tr').removeClass("active");
  107. list.push({ GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": false });
  108. }
  109. });
  110. $.uniform.update(set);
  111. $.post("/DiscountInfo/UpdateDiscountGoodLists", { "list": list }, function () { });
  112. });
  113. });
  114. </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);
  7. var query = from g in goods
  8. join t in categoryTypeServic.GetList() on g.CategoryTypeId equals t.Id
  9. join dg in dGoods on g.Id equals dg.GoodsId into joinDG
  10. from dept in joinDG.DefaultIfEmpty()
  11. select new GoodListItemViewModel
  12. {
  13. Id = g.Id,
  14. ImgPath = g.ImgPath,
  15. ProName = g.ProName,
  16. ProNumber = g.ProNumber,
  17. VipPrice = g.VipPrice,
  18. OrdinaryPrice = g.OrdinaryPrice,
  19. CategoryTypeId = g.CategoryTypeId,
  20. Selected = dept == null ? false : true,
  21. CategoryTypeName = t.TypeName
  22. };
  23. //数据总数(未过滤)
  24. total = query.Count();
  25. //搜索过滤
  26. if (string.IsNullOrWhiteSpace(table.search.value) == false)
  27. {
  28. query = query.Where(c=>c.ProName.Contains(table.search.value) || c.ProNumber.Contains(table.search.value) || c.CategoryTypeName.Contains(table.search.value));
  29. }
  30. #region 排序
  31. query = query.OrderBy(c => c.Id);
  32. foreach (var item in table.order)
  33. {
  34. if (item.dir == "asc")
  35. {
  36. switch (item.column)
  37. {
  38. case 0:
  39. query = query.OrderBy(c => c.Selected);
  40. break;
  41. case 2:
  42. query = query.OrderBy(c => c.ProName);
  43. break;
  44. case 3:
  45. query = query.OrderBy(c => c.ProNumber);
  46. break;
  47. case 4:
  48. query = query.OrderBy(c => c.CategoryTypeName);
  49. break;
  50. case 5:
  51. query = query.OrderBy(c => c.OrdinaryPrice);
  52. break;
  53. case 6:
  54. query = query.OrderBy(c => c.VipPrice);
  55. break;
  56. default:
  57. query = query.OrderBy(c => c.Selected);
  58. break;
  59. }
  60. }
  61. else {
  62. switch (item.column)
  63. {
  64. case 0:
  65. query = query.OrderByDescending(c => c.Selected);
  66. break;
  67. case 2:
  68. query = query.OrderByDescending(c => c.ProName);
  69. break;
  70. case 3:
  71. query = query.OrderByDescending(c => c.ProNumber);
  72. break;
  73. case 4:
  74. query = query.OrderByDescending(c => c.CategoryTypeName);
  75. break;
  76. case 5:
  77. query = query.OrderByDescending(c => c.ProName);
  78. break;
  79. case 6:
  80. query = query.OrderByDescending(c => c.ProNumber);
  81. break;
  82. default:
  83. query = query.OrderByDescending(c => c.Selected);
  84. break;
  85. }
  86. }
  87. }
  88. #endregion
  89. DatatablesResult<GoodListItemViewModel> jsModel = new DatatablesResult<GoodListItemViewModel>(query, table.start, table.length, table.draw, total);
  90. return Json(jsModel);
  91. }
  92. public class datatables
  93. {
  94. public datatables()
  95. {
  96. this.columns = new List<datatables_column>();
  97. this.order = new List<datatables_order>();
  98. }
  99. public int draw { get; set; }
  100. public List<datatables_column> columns { get; set; }
  101. /// <summary>
  102. /// 排序
  103. /// </summary>
  104. public List<datatables_order> order { get; set; }
  105. /// <summary>
  106. /// 数据开始位置,从0开始
  107. /// </summary>
  108. public int start { get; set; }
  109. /// <summary>
  110. /// 分页大小,-1代表不分页全部返回
  111. /// </summary>
  112. public int length { get; set; }
  113. /// <summary>
  114. /// 全局的搜索条件
  115. /// </summary>
  116. public datatables_search search { get; set; }
  117. }
  118. public class datatables_column
  119. {
  120. public int data { get; set; }
  121. public string name { get; set; }
  122. public bool searchable { get; set; }
  123. public bool orderable { get; set; }
  124. public datatables_search search { get; set; }
  125. }
  126. public class datatables_search
  127. {
  128. public string value { get; set; }
  129. public string regex { get; set; }
  130. }
  131. public class datatables_order
  132. {
  133. public int column { get; set; }
  134. public string dir { get; set; }
  135. }
  136. public class DatatablesResult<T>
  137. {
  138. public DatatablesResult(IQueryable<T> source, int start, int length, int draw, int recordsTotal)
  139. {
  140. this.draw = draw;
  141. this.recordsTotal = recordsTotal;
  142. this.recordsFiltered = source.Count();
  143. this.data = source.Skip(start).Take(length).ToList();
  144. }
  145. public DatatablesResult(IList<T> source, int start, int length, int draw, int recordsTotal)
  146. {
  147. this.draw = draw;
  148. this.recordsTotal = recordsTotal;
  149. this.recordsFiltered = source.Count();
  150. this.data = source.Skip(start).Take(length).ToList();
  151. }
  152. public DatatablesResult(IEnumerable<T> source, int start, int length, int draw, int recordsTotal)
  153. {
  154. this.draw = draw;
  155. this.recordsTotal = recordsTotal;
  156. this.recordsFiltered = source.Count();
  157. this.data = source.Skip(start).Take(length).ToList();
  158. }
  159. public DatatablesResult(IEnumerable<T> source, int recordsFiltered, int draw, int recordsTotal)
  160. {
  161. this.draw = draw;
  162. this.recordsTotal = recordsTotal;
  163. this.recordsFiltered = recordsFiltered;
  164. this.data = source.ToList();
  165. }
  166. public int draw { get; /*private*/ set; }
  167. public int recordsTotal { get; /*private*/ set; }
  168. public int recordsFiltered { get; /*private*/ set; }
  169. public IList<T> data { get; /*private*/ set; }
  170. }

最终效果图



参考资料
datatables.js 简单使用--多选框和服务器端分页 http://www.cnblogs.com/lanshanke/p/5058865.html
 服务器处理(Server-side processing) http://datatables.club/manual/server-side.html

JQuery Datatables服务器端处理示例的更多相关文章

  1. Jquery DataTables相关示例

    一.Jquery-DataTables DataTables 是jquery的一个开源的插件.它具有高度灵活的特性,基于渐进增强的基础,可以为任何表格添加交互.它特性如下: 提供分页,搜索和多列排序: ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. jquery.datatables中文使用说明

    http://www.cnblogs.com/taizhouxiaoba/archive/2009/03/17/1414426.html 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方 ...

  4. jQuery datatables

    jQuery datatables 属性,用例 参考:http://datatables.club/example/ http://blog.csdn.net/mickey_miki/article/ ...

  5. datatables插件适用示例

    本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.NET/] 二:基本使用:[http://www.guoxk.com/node/jQu ...

  6. jQuery dataTables四种数据来源[转]

    2019独角兽企业重金招聘Python工程师标准>>> 四种数据来源 对于 dataTables 来说,支持四种表格数据来源. 最为基本的就是来源于网页,网页被浏览器解析为 DOM ...

  7. ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之 ...

  8. jQuery DataTables && Django serializer

    jQuery DataTables https://www.datatables.net 本文参考的官方示例 http://datatables.net/release-datatables/exam ...

  9. jquery datatables api (转)

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

随机推荐

  1. C++函数返回局部指针变量

    遇到过好几次关于函数返回指针变量问题,有时候是可以的,有时候是不可以的,然后就混乱了.今天研究了下,结果发现原来和内存分配有关. 用下面的例子分析下吧: char * test() { char a[ ...

  2. 获取google翻译的音频文件_合并音频文件的方法

    1. 把引文输入google 翻译,然后点击"朗读"

  3. Android 把电话保存到现有联系人 已有联系人

    搜索了很长时间,想找个把电话保存到现有联系人的代码,就是打开选中的联系人编辑界面,然后自动添加电话,再手动保存,就跟手机上的一样,功夫不负有心人,终于给搜到了,很不容易啊,现分享如下, // 保存至现 ...

  4. iOS 标题内容待定

    UITableView: UITableViewCell的声明文件.所包含的: UIView控件(contentView,作为其它元素的父控件) -- 容器 两个UILabel控件( textLabe ...

  5. go json null字段的转换

    最近试了试go中对json null字段进行转换,代码如下: struct 转 json: package main import ( "encoding/json" " ...

  6. maven自动编译脚本

    在maven工程根目录创建windows批处理脚本文件,例如tool.bat,内容如下 @echo off color 1f :menu echo -------------------------- ...

  7. .NET 的 WebSocket 开发包比较

    编者按 本文出现在第三方产品评论部分中.在这一部分的文章只提供给会员,不允许工具供应商用来以任何方式和形式来促销或宣传产品.请会员报告任何垃圾信息或广告. Web项目常常需要将数据尽可能快地推送给客户 ...

  8. 在ABP中通过EF直接执行原生Sql的解决方案

    一般情况下,使用EF中的查询语法和方法语法可以帮助我们完成绝大部分业务,但是也有特殊的情况需要直接执行Sql语句.比如,我们的业务过于复杂繁琐,或是有些业务使用EF操作时比较复杂,但是使用Sql时会很 ...

  9. 【腾讯Bugly干货分享】iOS10 SiriKit QQ适配详解

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ece0331288fb4d31137da6 1. 概述 苹果在iOS10开放 ...

  10. 【腾讯Bugly干货分享】微信读书iOS性能优化

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/578c93ca9644bd524bfcabe8 “8小时内拼工作,8小时外拼成长 ...