基於 asp.net mvc 的 datatables 應用

基於asp.net mvc的datatables應用

前言
最近,公司項目使用了Adminlte,一個基於Bootstrap3的響應模板，裏面內置了各種組件，日期控件（datepicker，daterangpicker），下拉框（select2），treeview，儀表盤，表格等，其中使用到了datatables。下面來簡單說一下datatables的簡單使用。

1. 引用的css文件

bundles.Add(new StyleBundle("~/datatable/css").Include
               ("~/Scripts/bootstrap-v3.3.7/css/bootstrap.min.css"
               , "~/Scripts/datatables-v1.10.18/css/dataTables.bootstrap.min.css"));

2. 引用的js文件

 bundles.Add(new ScriptBundle("~/datatable/js").Include
               ("~/Scripts/jquery-v3.3.1/jquery-3.3.1.min.js"              
              , "~/Scripts/datatables-v1.10.18/js/jquery.dataTables.min.js"
              , "~/Scripts/datatables-v1.10.18/js/dataTables.bootstrap.min.js"));

3. 頁面展示
   

4. HTML代碼

@{
  ViewBag.Title = "Datatable demo";
  Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Header{@Styles.Render("~/datatable/css")}

<div class="col-md-12">
  <h3>User Information</h3>
  <form class="form-horizontal">
      <div class="form-group">
          <label class="control-label col-sm-1">User</label>
          <div class="col-sm-3">
              <input type="text" class="form-control col-sm-3" id="txtUser" />
          </div>
      </div>

      <div class=" form-group">
          <div class="col-sm-1"></div>
          <div class="col-sm-11">
              <button type="button" class="btn btn-info" onclick="Search();">Search</button>
              <button type="button" class="btn btn-info" onclick="Add();">Add</button>
              <button type="reset" class="btn btn-info" >Reset</button>
          </div>
      </div>
  </form>



  <table id="tblUser" class="table table-bordered table-hover">
      <thead>
          <tr>
              <td>User</td>
              <td>ID</td>
              <td>Gender</td>
              <td>Age</td>
              <td>Position</td>
              <td>Grade</td>
              <td>Action</td>
          </tr>
      </thead>
  </table>
</div>

@section Footer{@Scripts.Render("~/datatable/js")

<script type="text/javascript">
  var datatable;
  $(function () {
      datatable = $('#tblUser').DataTable({
          searching: false, //查詢
          processing: true,
          serverSide: true, //服務端還是客戶端分頁
          paging: true, //是否有分頁
          pagingType:'full_numbers', //分頁按鈕顯示形式
          rowId: 'ID', //每一行的ID
          ordering: false,
          ajax: function (data, callback, settings) {
              var params = {
                  userName: $("#txtUser").val(),
                  pageIndex: (data.start / data.length) + 1,
                  pageSize: data.length,                    
              };
              $.ajax({
                  url: "@Url.Action("PageList", "Test")",
                  type: "post",
                  data: $.extend({}, data, params, true),
                  dataType: "json",
                  success: function (serverData) {
                      callback(serverData);
                  }
              });
          },
              columns: [
                  { data: "Name" },
                  { data: "ID" },
                  { data: "Gender" },
                  { data: "Age" },
                  { data: "Position" },
                  { data: "Grade" },
                  null
              ],
              columnDefs: [//自定義列屬性
                  {
                      targets: -1,//倒數第一列
                      data: null,
                      width: "150px",
                      sClass: 'text-center',
                      orderable: false,//是否有排序條件
                      render: function (data, type, row) {//渲染事件
                          var html = "<a οnclick='Update(\"" + row.ID + "\");' class='btn btn-info btn-xs'>Update</a> "
                          html += "<a οnclick='Delete(\"" + row.ID + "\");' class='btn btn-default btn-xs'>Delete</a> ";
                          return html;
                      }
                  }]              
      });

  })

  function Search() {
      datatable.ajax.reload();
  }

  function Add() {
      alert('This is add function.');
  }    

  function Update(rowID) {
      alert('This is update function. rowID is ' + rowID);
  }

  function Delete(rowID) {
      alert("This is delete function. rowID is " + rowID);
  }
</script>
}

5.後端cs的代碼

using datatable.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace datatable.Controllers
{
   public class TestController : Controller
   {
       [HttpGet]
       public ActionResult Index()
       {
           return View();
       }

       [HttpPost]
       public ActionResult PageList(string userName = "", int pageIndex = 1, int pageSize = 10)
       {
           var userList = new List<User>();

           var random = new Random();

           for (int i = 1; i <= 100; i++)
           {
               var user = new User()
               {
                   Name = "Tim" + i,
                   Gender = i % 2 == 0 ? "Femal" : "Male",
                   ID = i.ToString(),
                   Age = random.Next(18, 30),
                   Grade = "AP3",
                   Position = "IT"
               };

               userList.Add(user);
           }

           userList = (from item in userList
                       where item.Name.Contains(userName)
                       select item).ToList();

           return Json(new TableInfo
           {
               draw = int.Parse(Request.Form["draw"]),
               recordsTotal = userList.Count(),
               recordsFiltered = userList.Count(),
               data = userList.Skip(pageSize * (pageIndex - 1)).Take(pageSize)
           });
       }
   }
}

User 類

   public class User
   {
       public string Name { get; set; }
   
       public string ID { get; set; }
   
       public string Gender { get; set; }
   
       public int Age { get; set; }
   
       public string Position { get; set; }
   
       public string Grade { get; set; }
   }

TableInfo 類

    public class TableInfo //返回給前端的json格式
   {
       public int draw { get; set; }
       public int recordsTotal { get; set; }
       public int recordsFiltered { get; set; }
       public object data { get; set; }
   }

• Github：https://github.com/Lyq1454759684/Datatables-Demo
• 碼雲：https://gitee.com/Tim_Lee_ZhongShan/Datatables-Demo