ASP.NET MVC 使用Ajax定时刷新DataTable数据

应用场景：网页需要实时刷新一些数据时，就需要做一个表格的实时异步刷新功能，并且某些字段动态添加样式。

应用技术：ASP.NET MVC5 + JQuery +  JQuery.DataTable + BootStrap。

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": false,       // 关闭搜索框
 7                 "orderMulti": false,   // 关闭多列排序
 8                 "paging": false,       // 关闭分页
 9                 "info": false,         // 影藏左下角信息栏
10                 "order": [[2, "desc"]],//默认按照第3列排序
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.最终效果

扫描二维码关注公众号，回复： 7940406 查看本文章