如何在.NetCore MVC使用CloudTables控件實現分頁

 

 

 1 <section class="content">
 2     <div class="row">
 3         <div class="col-md-12">
 4             <div class="box">
 5                 <div class="box-header">
 6                     <div class="form-group">
 7                         <label>Policy Type</label>
 8                         <div class="input-group" style=" width: 50%;">
 9                             <select class="form-control" id="policyType" onchange="changePolicy()">
10                                 <option value="1">Australia Fundamental Policy</option>
11                                 <option value="2" selected="">Global Fundamental Policy</option>
12                                 <option value="3">NPM Policy</option>
13                             </select>
14                         </div>
15                     </div>
16                     <div class="box-body">
17                         <table id="example" class="table table-bordered table-hover">
18                             <thead>
19                                 <tr>
20                                     <th>Id</th>
21                                     <th>Policy Type</th>
22                                     <th>Parent Category</th>
23                                     <th>Category</th>
24                                     <th>Content</th>
25                                 </tr>
26                             </thead>
27                             <tbody>
28                             </tbody>
29                         </table>
30                     </div>
31                     <!-- /.box-body -->
32                 </div>
33             </div>
34             <!-- /.col -->
35         </div>
36     </div>
37     <!-- /.row -->
38 </section>
39 <!-- page script -->
40 <script src="~/js/Answer/Index.js?v=@(DateTime.UtcNow.Ticks)"></script>

 

  1 ////var urlPrefix = "/EquityAnswerTool";
  2 var urlPrefix = "";
  3 
  4 $(function () {
  5     Initial();
  6 })
  7 
  8 function Initial() {
  9     var modal = document.getElementById('starModal');
 10     modal.style.display = "block";
 11     var policyType = $("#policyType").val();
 12     //$.ajax({
 13     //    type: "GET",
 14     //    url: urlPrefix + "/Answer/List?policyType=" + policyType,
 15     //    dataType: "json",
 16     //    success: function (obj) {
 17     //        $('table').DataTable().destroy();
 18     //        $("table tbody tr").remove();
 19     //        if (obj && obj.Code == 1) {
 20     //            var tr = "";
 21     //            for (var i = 0; i < obj.Data.length; i++) {
 22     //                tr += "<tr>"
 23     //                tr += "<td><a href='" + urlPrefix + "/Answer/Edit?id=" + obj.Data[i].Id + "'>" + obj.Data[i].Id + "</a></td>";
 24     //                //tr += "<td>" + (obj.Data[i].PolicyType == 1 ? "Australia Fundamental Policy" : "Global Fundamental Policy") + "</td>";
 25     //                tr += "<td>" + getPolicy(obj.Data[i].PolicyType) + "</td>";
 26     //                tr += "<td>" + obj.Data[i].ParentContent + "</td>";
 27     //                tr += "<td>" + obj.Data[i].Category + "</td>";
 28     //                tr += "<td>" + obj.Data[i].Content + "</td>";
 29     //                tr += "</tr>"
 30     //            }
 31     //            $("table tbody").append(tr);
 32     //        }
 33 
 34     //        $('table').DataTable({
 35     //            //'retrieve': true,
 36     //            "pagingType": "full_numbers",
 37     //            'paging': true,
 38     //            'lengthChange': false,
 39     //            'searching': true,
 40     //            'ordering': false,
 41     //            'info': true,
 42     //            //'autoWidth': true
 43     //        });
 44 
 45     //        $('.row')[1].children[0].remove();
 46 
 47     //        modal.style.display = "none";
 48     //    }
 49     //});
 50 
 51     //$('#example').DataTable({
 52     //    //'retrieve': true,
 53     //    //"pagingType": "full_numbers",
 54     //    //'paging': true,
 55     //    //'lengthChange': false,
 56     //    //'searching': true,
 57     //    //'ordering': false,
 58     //    //'info': true,
 59     //    "processing": true,
 60     //    "serverSide": true,
 61     //    ajax: {
 62     //        type: "POST",
 63     //        url: urlPrefix + "/Answer/List",
 64     //        //dataType: "json",
 65     //        data: function (d) {
 66     //            return JSON.stringify({ parameters: d });
 67     //        }
 68     //    }
 69     //    //'autoWidth': true
 70     //});
 71     $('table').DataTable().destroy();
 72     $("table tbody tr").remove();
 73 
 74     $('#example').dataTable({
 75         "processing": true,
 76         "serverSide": true,
 77         "filter": true,
 78         "paging": true,
 79         //"lengthMenu": [5, 10, 15, 20],
 80         "responsive": true,
 81         "order": [[0, 'asc']],
 82         "ajax": {
 83             "url": urlPrefix + "/Answer/List",
 84             "datatype": "json",
 85             "data": { policyType },
 86             "type": "POST",
 87             //"success": function (data) {
 88             //    modal.style.display = "none";
 89             //}
 90             "dataSrc": function (json) {
 91                 for (var i = 0, ien = json.data.length; i < ien; i++) {
 92                     json.data[i].Id = "<a href='" + urlPrefix + "/Answer/Edit?id=" + json.data[i].Id + "'>" + json.data[i].Id + "</a>";
 93                     json.data[i].PolicyType = getPolicy(json.data[i].PolicyType)
 94                 }
 95                 return json.data;
 96             }
 97         },
 98         "initComplete": function (settings, json) {
 99             modal.style.display = "none";
100         },
101         "columnsDefs": [
102             { "target": 0 },
103             { "target": 1 },
104             { "target": 2 },
105             { "target": 3 },
106             { "target": 4 }
107         ],
108         "columns": [
109             { "data": "Id" },
110             { "data": "PolicyType" },
111             { "data": "ParentContent" },
112             { "data": "Category" },
113             { "data": "Content" }
114         ]
115     });
116 }
117 
118 function changePolicy() {
119     Initial();
120 }
121 
122 function getPolicy(policyType) {
123     if (policyType == "1") {
124         return "Australia Fundamental Policy";
125     } else if (policyType == "2") {
126         return "Global Fundamental Policy"
127     } else if (policyType == "3") {
128         return "NPM Policy"
129     } else if (policyType == "4") {
130         return "ECM"
131     }
132     return "";
133 }

 

 1        [HttpPost]
 2         public JsonResult List(int policyType)
 3         {
 4             //Search parameters
 5             var searchStr = Request.Form["search[value]"].FirstOrDefault();
 6 
 7             //Sorting parameters
 8             string sortColumn, sortDirection;
 9             sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
10             sortDirection = Request.Form["order[0][dir]"].FirstOrDefault();
11 
12             //Pagination parameters
13             string length = Request.Form["length"].FirstOrDefault();
14             string start = Request.Form["start"].FirstOrDefault();
15 
16             int pagesize = length != null ? Convert.ToInt32(length) : 0;
17             int skipRecords = start != null ? Convert.ToInt32(start) : 0;
18 
19             int recordsCount;
20 
21             var list = _EquityFundamentalsService.GetAnswers(policyType,searchStr, sortColumn,sortDirection,pagesize,skipRecords,out recordsCount);
22 
23             return Json(new { data = list, recordsFiltered = recordsCount, recordsTotal = recordsCount });
24         }

 

 1  public IEnumerable<AnswerDto> GetAnswers(int policyType, string searchStr, string sortCol, string sortDir, int pageSize, int skipRecords, out int recordsCount)
 2         {
 3             Framework.Db.Chatbot.ChatbotContext _DbContext = new Framework.Db.Chatbot.ChatbotContext();
 4 
 5             var entityFundamentalsList = _DbContext.EquityFundamentals.Where(n => n.IsLeaf == true && n.PolicyType == policyType && n.Content.ToLower().Contains(searchStr.ToLower()));
 6 
 7             recordsCount = entityFundamentalsList.Count();
 8 
 9             switch (sortCol)
10             {
11                 case "Id":
12                     entityFundamentalsList = sortDir.ToLower() == "asc" ?
13                         entityFundamentalsList.OrderBy(n => n.Id) : entityFundamentalsList.OrderByDescending(n => n.Id);
14                     break;
15                 default:
16                     break;
17             }
18 
19             var result = entityFundamentalsList.Skip(skipRecords).Take(pageSize).ToList().Select(n => new AnswerDto
20             {
21                 Id = n.Id,
22                 ParentContent = this.HandleUSCanadaCategory(n.Id, n.PolicyType),
23                 Category = _DbContext.EquityFundamentals.Where(c => c.Id == n.ParentId).FirstOrDefault()?.Content,
24                 Content = this.HandleContent(n.Content),
25                 Level = n.Level,
26                 PolicyType = n.PolicyType
27             });
28 
29             return result;
30 
31         }