mvc ajax定时刷新数据库,ASP.NET MVC 使用Ajax定时刷新DataTable数据

末蓝、 2022-09-03 06:17 220阅读 0赞

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

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

1.建立实体类

1 public class TableEntity

2 \{

3 public string ColumnA \{ get; set; \}

5 public double ColumnB \{ get; set; \}

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库

ColumnA

ColumnB

ColumnC

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

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);

77 totalCol2 = api

78 .column(2)

79 .data()

80 .reduce(function (a, b) \{

81 return a + b;

82 \}, 0).toFixed(1);

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 \}

5 setInterval(function () \{

6 //console.log(reload);

7 var dataTable = $("\#entity\_table").DataTable();

8 dataTable.ajax.reload();

9 \}, 1000);

6.最终效果

![44d93ce56c1265a02063b0c65a632489.png][]

[44d93ce56c1265a02063b0c65a632489.png]: /images/20220829/947811021a004d089f05a2ddae7ba316.png

mvc ajax定时刷新数据库,ASP.NET MVC 使用Ajax定时刷新DataTable数据

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ajax 定时操作数据库

相关 AJAX定时刷新

相关 mvc ajax定时刷新数据库,ASP.NET MVC 使用Ajax定时刷新DataTable数据

相关 mvc ajax定时刷新数据库,在ASP.NET MVC中使用AJAX刷新表

相关 servlet定时刷新

相关 jQuery实现AJAX定时刷新局部页面实例

相关 Highcharts+Ajax定时从后端获取数据刷新数据、坐标轴、title等

相关 Ajax定时获取数据

相关 dataTable定时刷新数据

相关 Vue定时刷新页面数据