ASP.NET MVC 使用Ajax定時刷新DataTable數據

應用場景：網頁需要實時刷新一些數據時，就需要做一個表格的實時異步刷新功能，並且某些字段動態添加樣式。

應用技術：ASP.NET MVC5 + JQuery +  JQuery.DataTable + BootStrap。

JS:

//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js

CSS:

//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css

1.建立實體類

1     public class TableEntity
2     {
3         public string ColumnA { get; set; }
4 
5         public double ColumnB { get; set; }
6 
7         public double ColumnC { get; set; }
8     }

2.添加控制器，模擬表格數據

 1         [HttpPost]
 2         public ActionResult LoadTableData()
 3         {
 4             var random = new Random();
 5             var entities = new List<TableEntity>();
 6             for (int i = 0; i < 10; i++)
 7             {
 8                 entities.Add(new TableEntity
 9                 {
10                     ColumnA = string.Format("Row[{0}]", i),
11                     ColumnB = random.NextDouble(),
12                     ColumnC = random.NextDouble() * (i % random.Next(1, 3) == 0 ? 1 : -1)
13                 });
14             }
15             return Json(new { data = entities });
16         }

3.添加視圖頁面，添加表格HTML，引入css,js庫

 1 <table id="entity_table" class="table table-bordered table-hover">
 2     <thead>
 3         <tr>
 4             <td>ColumnA</td>
 5             <td>ColumnB</td>
 6             <td>ColumnC</td>
 7         </tr>
 8     </thead>
 9     <tfoot>
10         <tr>
11             <th></th>
12             <th></th>
13             <th></th>
14         </tr>
15     </tfoot>
16 </table>

4.視圖頁面添加表格初始化函數

 1     <script>
 2         function InitEntityTable() {
 3             $("#entity_table").DataTable({
 4                 "processing": false,   // 影藏處理進度欄
 5                 "serverSide": false,   // 禁用服務端排序，搜索功能
 6                 "filter": true,       // 添加搜索框
 7                 "orderMulti": false,   // 關閉多列排序
 8                 "paging": true,       // 開啓分頁
 9                 "info": true,         // 開啓左下角信息欄
10                 "order": [[2, "desc"]],//默認按照第3列排序
                   "lengthMenu": [[10, 20, 40, 60, -1], [10, 20, 40, 60, "All"]],
　　　　　　　　　　　　"fnInitComplete": function () {

　　　　　　　　　　　　　　　　$(".dataTables_length select").addClass("form-control").css("height","30px");
　　　　　　　　　　　　　},

11                 //添加AJAX
12                 "ajax": {
13                     "url": "/Demo/LoadEntityData",
14                     "type": "POST",
15                     "datatype": "json"
16                 },
17                 //定義列詳細信息，可以按照每行數據處理Cell的顯示
18                 "columnDefs": [
19                     {
20                         //第一列，targets = 0
21                         "targets": [0],
22                         //是否可排序
23                         "orderable": true,
24                         //是否影藏該列的顯示
25                         "visible": true,
26                         //修改第一列排序規則，按照第三列的數據排序
27                         "orderData": 2,
28                         //通過createdCell回調，處理具體Cell的樣式
29                         "createdCell": function (nTd, sData, oData, iRow, iCol) {
30                             if (oData["ColumnC"] > 0) {
31                                 $(nTd).css("color", "red");
32                             }
33                             else {
34                                 $(nTd).css("color", "green");
35                             }
36                         }
37                     },
38                     //沒有特殊操作的列可以不寫ColumnDef
39                     //{
40                     //    "targets": [1],
41                     //},
42                     {
43                         "targets": [2],
44                         "createdCell": function (nTd, sData, oData, iRow, iCol) {
45                             //將ColumnA作爲Title添加到第三列的Cell中
46                             $(nTd).attr("title", oData["ColumnA"]);
47                             if (sData > 0) {
48                                 $(nTd).css("color", "red");
49                             }
50                             else {
51                                 $(nTd).css("color", "green");
52                             }
53                         }
54                     }
55                 ],
56                 //將後臺返回的json數據綁定到對應的單元格中
57                 "columns": [
58                     { "data": "ColumnA", "name": "列A" },
59                     { "data": "ColumnB", "name": "列B" },
60                     {
61                         "data": "ColumnC", "name": "列C", render: function (data) {
62                             //用百分比顯示
63                             return (data * 100).toFixed(2) + '%'
64                         }
65                     },
66                 ],
67                 //Footer總計欄
68                 "footerCallback": function (row, data, start, end, display) {
69                     var api = this.api(), data;
70                     totalCol1 = api
71                         .column(1)
72                         .data()
73                         .reduce(function (a, b) {
74                             return a + b;
75                         }, 0);
76 
77                     totalCol2 = api
78                         .column(2)
79                         .data()
80                         .reduce(function (a, b) {
81                             return a + b;
82                         }, 0).toFixed(1);
83 
84                     // Update footer
85                     $(api.column(0).footer()).html('總 計');
86                     $(api.column(1).footer()).html(totalCol1.toFixed(2));
87                 }
88             });
89         }

5.視圖頁面添加表格定時刷新函數，添加初始化函數

1         $(document).ready(function () {
2             InitEntityTable();
3         }
4 
5         setInterval(function () {
6             //console.log(reload);
7             var dataTable = $("#entity_table").DataTable();
8             dataTable.ajax.reload();
9         }, 1000);

 

 6.最終效果