1)ABP DataTables 应用(一)

2)  ABP DataTables 应用(二)

JS DataTables 这个组件绑定数据必须要有自己的返回数据格式。但是ABP返回的格式直接绑定是错误。添加DataTables JS 扩展、数据加载等。ABP 原作者已经在ABP.ZERO CORE 项目有相应的应用。

DataTable JS 扩展:

 1 /************************************************************************
 2 * datatables AJAX 扩展                                      *
 3 *************************************************************************/
 4 (function ($) {
 5 
 6     if (!$.fn.dataTableExt) {
 7         return;
 8     }
 9 
10     var doAjax = function (listAction, requestData, callbackFunction, settings) {
11         var inputFilter = {};
12 
13         //设置表过滤器
14         if (listAction.inputFilter) {
15             inputFilter = $.extend(inputFilter, listAction.inputFilter());
16         }
17 
18         //设置分页过滤器
19         if (settings.oInit.paging) {
20             inputFilter = $.extend(inputFilter, {
21                 maxResultCount: requestData.length,
22                 skipCount: requestData.start
23             });
24         }
25 
26         //排序过滤器
27         if (requestData.order && requestData.order.length > 0) {
28             var orderingField = requestData.order[0];
29             if (requestData.columns[orderingField.column].data) {
30                 inputFilter.sorting = requestData.columns[orderingField.column].data + " " + orderingField.dir;
31             }
32         }
33 
34     
35         if (listAction.ajaxFunction) {
36             listAction.ajaxFunction(inputFilter)
37                 .done(function (result) {
38                     settings.rawServerResponse = result;
39                     callbackFunction({
40                         recordsTotal: result.totalCount, //总数
41                         recordsFiltered: result.totalCount,
42                         data: result.items //数据项
43                     });
44                 });
45         }
46     }
47 
48     if (!$.fn.dataTable) {
49         return;
50     }
51 
52     $.extend(true, $.fn.dataTable.defaults, {
53         ajax: function (requestData, callbackFunction, settings) {
54             if (!settings) {
55                 return;
56             }
57 
58             if (!settings.oInit) {
59                 return;
60             }
61 
62             if (!settings.oInit.listAction) {
63                 return;
64             }
65 
66             doAjax(settings.oInit.listAction, requestData, callbackFunction, settings);
67         }
68     });
69     //重新加载
70     $.fn.dataTable.Api.register('ajax.reloadPage()', function () {
71         this.ajax.reload(null, false);
72     });
73 
74 })(jQuery);
DataTables数据加载扩展 

相关文章: