JQuery Datatables服务器端处理示例
HTML
<table class="table table-striped table-bordered table-hover" id="table_report"> <thead> <tr role="row"> <th class="table-checkbox"> 选择 </th> <th>图片</th> <th>商品名称</th> <th>商品编码</th> <th>商品类型</th> <th>价格</th> <th>会员价格</th> </tr> </thead> <tbody></tbody> <tfoot> <tr role="row"> <th class="table-checkbox"> <input type="checkbox" class="group-checkable" data-set="#table_report .checkboxes" /> </th> <th>图片</th> <th>商品名称</th> <th>商品编码</th> <th>商品类型</th> <th>价格</th> <th>会员价格</th> </tr> </tfoot></table>
javascript
<script type="text/javascript"> $(function () { var table = $('#table_report'); var oTable = table.dataTable({ "processing": true, "serverSide": true, //"stateSave": true, // save datatable state(pagination, sort, etc) in cookie. "pagingType": "bootstrap_full_number", "language": { "aria": { "sortAscending": ": 以升序排列此列", "sortDescending": ": 以降序排列此列" }, "loadingRecords": "数据载入中...", "emptyTable": "表中数据为空", "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", "infoEmpty": "无数据", "infoFiltered": "(由 _MAX_ 项过滤获得)", "infoPostFix": "", "infoThousands": ",", "lengthMenu": "显示 _MENU_ 项结果", "search": "搜索:", "zeroRecords": "没有匹配结果", "paging": { "first": "首页", "previous": "上页", "next": "下页", "last": "末页" }, "paginate": { "previous": "上一页", "next": "下一页", "last": "尾页", "first": "首页" } }, "ajax": { url: "/DiscountInfo/DiscountGoodList/" + $("#GoodId").val(), contentType: "application/json", type: "POST", data: function (d) { var x = JSON.stringify(d); //console.log(x); return x; }, }, "columns": [ { "data": "Id", "render": function (data, type, full, meta) { return '<input type="checkbox" class="checkboxes" value="' + data + '"/>'; } }, { "data": "ImgPath", "name": "图片", "orderable": false ,"render": function (data, type, full, meta) { return '<img src="' + data + '" height="48" width="48" onerror="errorProImg(this)"></img>'; }}, { "data": "ProName", "name": "商品名称", "orderable": true }, { "data": "ProNumber", "name": "商品编码", "orderable": true }, { "data": "CategoryTypeName", "name": "商品类型", "orderable": true }, { "data": "OrdinaryPrice", "name": "价格", "orderable": true }, { "data": "VipPrice", "name": "会员价格", "orderable": true }], "rowCallback": function (row, data) { $(row).find("input").uniform(); if (data.Selected) { $(row).addClass('active').find("input").attr("checked", true); } else { } $.uniform.update(); }, "lengthMenu": [ [20, 50, 100], [20, 50, 100] // change per page values here ], // set the initial value "pageLength": 20, //"columnDefs": [{ // set default column settings // 'targets': [0], // "searchable": false, // 'orderable': false //}], "order": [ [0, "desc"]// set first column as a default sort by asc ] }); //单项操做 table.on('change', 'tbody tr .checkboxes', function () { var checked = $(this).is(":checked"); if (checked) { $(this).parents('tr').addClass("active"); $.post("/DiscountInfo/UpdateDiscountGoodList", { GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": true }, function () { }); } else { $(this).parents('tr').removeClass("active"); $.post("/DiscountInfo/UpdateDiscountGoodList", { GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": false }, function () { }); } }); //多项操做 table.find('.group-checkable').on("change", function () { var set = $(this).attr("data-set"); var checked = $(this).is(":checked"); var list = []; $(set).each(function () { if (checked) { $(this).attr("checked", true); $(this).parents('tr').addClass("active"); list.push({ GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": true }); } else { $(this).attr("checked", false); $(this).parents('tr').removeClass("active"); list.push({ GoodId: $(this).val(), DiscountId: $("#GoodId").val(), "Selected": false }); } }); $.uniform.update(set); $.post("/DiscountInfo/UpdateDiscountGoodLists", { "list": list }, function () { }); }); }); </script>
Service/asp.net mvc
[HttpPost]public JsonResult DiscountGoodList(Guid id,datatables table){ int total = 0; var goods = productsService.GetList(); var dGoods = discountgoodsService.GetList().Where(c => c.Deleted == false && c.RuleId == id); var query = from g in goods join t in categoryTypeServic.GetList() on g.CategoryTypeId equals t.Id join dg in dGoods on g.Id equals dg.GoodsId into joinDG from dept in joinDG.DefaultIfEmpty() select new GoodListItemViewModel { Id = g.Id, ImgPath = g.ImgPath, ProName = g.ProName, ProNumber = g.ProNumber, VipPrice = g.VipPrice, OrdinaryPrice = g.OrdinaryPrice, CategoryTypeId = g.CategoryTypeId, Selected = dept == null ? false : true, CategoryTypeName = t.TypeName }; //数据总数（未过滤） total = query.Count(); //搜索过滤 if (string.IsNullOrWhiteSpace(table.search.value) == false) { query = query.Where(c=>c.ProName.Contains(table.search.value) || c.ProNumber.Contains(table.search.value) || c.CategoryTypeName.Contains(table.search.value)); } #region 排序 query = query.OrderBy(c => c.Id); foreach (var item in table.order) { if (item.dir == "asc") { switch (item.column) { case 0: query = query.OrderBy(c => c.Selected); break; case 2: query = query.OrderBy(c => c.ProName); break; case 3: query = query.OrderBy(c => c.ProNumber); break; case 4: query = query.OrderBy(c => c.CategoryTypeName); break; case 5: query = query.OrderBy(c => c.OrdinaryPrice); break; case 6: query = query.OrderBy(c => c.VipPrice); break; default: query = query.OrderBy(c => c.Selected); break; } } else { switch (item.column) { case 0: query = query.OrderByDescending(c => c.Selected); break; case 2: query = query.OrderByDescending(c => c.ProName); break; case 3: query = query.OrderByDescending(c => c.ProNumber); break; case 4: query = query.OrderByDescending(c => c.CategoryTypeName); break; case 5: query = query.OrderByDescending(c => c.ProName); break; case 6: query = query.OrderByDescending(c => c.ProNumber); break; default: query = query.OrderByDescending(c => c.Selected); break; } } } #endregion DatatablesResult<GoodListItemViewModel> jsModel = new DatatablesResult<GoodListItemViewModel>(query, table.start, table.length, table.draw, total); return Json(jsModel);} public class datatables{ public datatables() { this.columns = new List<datatables_column>(); this.order = new List<datatables_order>(); } public int draw { get; set; } public List<datatables_column> columns { get; set; } /// <summary> /// 排序 /// </summary> public List<datatables_order> order { get; set; } /// <summary> /// 数据开始位置，从0开始 /// </summary> public int start { get; set; } /// <summary> /// 分页大小，-1表明不分页所有返回 /// </summary> public int length { get; set; } /// <summary> /// 全局的搜索条件 /// </summary> public datatables_search search { get; set; }}public class datatables_column{ public int data { get; set; } public string name { get; set; } public bool searchable { get; set; } public bool orderable { get; set; } public datatables_search search { get; set; }}public class datatables_search{ public string value { get; set; } public string regex { get; set; }}public class datatables_order{ public int column { get; set; } public string dir { get; set; }} public class DatatablesResult<T>{ public DatatablesResult(IQueryable<T> source, int start, int length, int draw, int recordsTotal) { this.draw = draw; this.recordsTotal = recordsTotal; this.recordsFiltered = source.Count(); this.data = source.Skip(start).Take(length).ToList(); } public DatatablesResult(IList<T> source, int start, int length, int draw, int recordsTotal) { this.draw = draw; this.recordsTotal = recordsTotal; this.recordsFiltered = source.Count(); this.data = source.Skip(start).Take(length).ToList(); } public DatatablesResult(IEnumerable<T> source, int start, int length, int draw, int recordsTotal) { this.draw = draw; this.recordsTotal = recordsTotal; this.recordsFiltered = source.Count(); this.data = source.Skip(start).Take(length).ToList(); } public DatatablesResult(IEnumerable<T> source, int recordsFiltered, int draw, int recordsTotal) { this.draw = draw; this.recordsTotal = recordsTotal; this.recordsFiltered = recordsFiltered; this.data = source.ToList(); } public int draw { get; /*private*/ set; } public int recordsTotal { get; /*private*/ set; } public int recordsFiltered { get; /*private*/ set; } public IList<T> data { get; /*private*/ set; }}
最终效果图
参考资料
datatables.js 简单使用--多选框和服务器端分页
http://www.cnblogs.com/lanshanke/p/5058865.html
服务器处理(Server-side processing)
http://datatables.club/manual/server-side.html
相关文章
- 1. Laravel Datatables 服务器处理输出
- 2. Jquery DataTables相关示例
- 3. datatables服务器端分页
- 4. JQuery DataTables 服务端分页的实现(最新实例)
- 5. jQuery DataTables插件 从服务器端获取数据的方法
- 6. datatables服务器端分页要点
- 7. cheerio 服务器端的jquery
- 8. datatables+java实现服务器端分页，排序，查询，列的显示隐藏
- 9. datatables+java实现服务器端分页，排序，查询，列的显示影藏
- 10. thinkphp+datatables+ajax 大量数据服务器端查询
- 更多相关文章...
- • XSLT - 在服务器端 - XSLT 教程
- • 服务端脚本 指南 - 网站建设指南
- • Spring Cloud 微服务实战(三) - 服务注册与发现
- • Docker容器实战(一) - 封神Server端技术
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 论文大盘点-光流篇
- 2. Photoshop教程_ps中怎么载入图案？PS图案如何导入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 导入源码包
- 6. python学习 day2——基础学习
- 7. 3D将是页游市场新赛道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 图片(pgn显示、jpg不显示)解决方案
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Laravel Datatables 服务器处理输出
- 2. Jquery DataTables相关示例
- 3. datatables服务器端分页
- 4. JQuery DataTables 服务端分页的实现(最新实例)
- 5. jQuery DataTables插件 从服务器端获取数据的方法
- 6. datatables服务器端分页要点
- 7. cheerio 服务器端的jquery
- 8. datatables+java实现服务器端分页，排序，查询，列的显示隐藏
- 9. datatables+java实现服务器端分页，排序，查询，列的显示影藏
- 10. thinkphp+datatables+ajax 大量数据服务器端查询