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

应用技术：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();

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

2

3

4

ColumnA

5

ColumnB

6

ColumnC

7

8

9

10

11

12

13

14

15

16

4.视图页面添加表格初始化函数

1

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.最终效果