ASP.NET MVC with Ajax regularly updated data DataTable

Scenario: When pages need to refresh some of the real-time data, we need to do a form of real-time asynchronous refresh function, and some fields are dynamically added style.

Applied Technology: ASP.NET MVC5 + JQuery + JQuery.DataTable + BootStrap.

1. The establishment of the entity class

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. Add the controller, the analog data table

 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. Add the view page, add a form HTML, the introduction of css, js library

 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. Add a table view page initialization function

1      <Script>
 2          function InitEntityTable () {
 3              $ ( "entity_table #" ) .DataTable ({
 4                  "Processing": false ,    // shadow possession of the progress bar 
5                  "Serverside": false ,    // disable the service side sorting, search 
6                  "filter": false ,        // Close window 
7                  "orderMulti": false ,    // close the multi-column sorting 
8                  "Paging": false ,       // close tabs
. 9                  "info": to false ,          // hidden bottom left Movies information column 
10                  "Order": [[2, "desc"]], // default sort according to the first three 
11                  // add AJAX 
12 is                  "Ajax" : {
 13 is                      "URL": "/ Demo / LoadEntityData" ,
 14                      "type": "the POST" ,
 15                      "DataType": "JSON"
 16                  },
 . 17                  // define columns details, Cell can be processed according to each row of data display 
18                  " columnDefs " :
[
19                     {
20                         // first column, 0 = Targets 
21 is                          "Targets": [0 ],
 22 is                          // is sortable 
23 is                          "orderable": to true ,
 24                          // shows whether the column Movies reservoirs 
25                          "visible": to true ,
 26 is                          / / modifying the first column collation, sorted according to data of the third row 
27                          "orderData": 2 ,
 28                          // through the callback createdCell address specific style Cell 
29                          "createdCell": function (nT d, sData, oData, iRow, iCol ) {
 30                              IF (oData [ "ColumnC"]>0) {
31 is                                  $ (nT d) .css ( "Color", "Red" );
 32                              }
 33 is                              the else {
 34 is                                  $ (nT d) .css ( "Color", "Green" );
 35                              }
 36                          }
 37 [                      },
 38 is                      // no column special actions can not write ColumnDef 
39                      // { 
40                      //     "Targets": [. 1], 
41 is                      // }, 
42 is                      {
 43 is                          "Targets": [2 ],
 44 is                         "createdCell": function (nT d, sData, oData, iRow, iCol) {
 45                              // be added to Title Cell ColumnA as the third column 
46 is                              $ (nT d) .attr ( "title", oData [ "ColumnA" ] );
 47                              IF (sData> 0 ) {
 48                                  $ (nT d) .css ( "Color", "Red" );
 49                              }
 50                              the else {
 51 is                                  $ (nT d) .css ( "Color", "Green" );
52                             }
53                         }
54                     }
55                  ],
 56                  // bind json data returned back to the corresponding cell 
57 is                  "Columns" : [
 58                      { "Data": "ColumnA", "name": "Column A" },
 59                      { "Data ":" ColumnB "," name ":" column B " },
 60                      {
 61 is                          " Data ":" ColumnC "," name ":" column C ", the render: function (Data) {
 62 is                              // displayed as a percentage 
63                              return (100 * Data) .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. Add the table view page refresh timer function, add initialization function

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. Final results