应用场景：网页需要实时刷新一些数据时，就需要做一个表格的实时异步刷新功能，并且某些字段动态添加样式。
应用技术：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.最终效果