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. 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 大量數據服務器端查詢