基於asp.net mvc的datatables應用
前言
最近,公司項目使用了Adminlte,一個基於Bootstrap3的響應模板,裏面內置了各種組件,日期控件(datepicker,daterangpicker),下拉框(select2),treeview,儀表盤,表格等,其中使用到了datatables。下面來簡單說一下datatables的簡單使用。
- 引用的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"));
- 引用的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"));
-
頁面展示
-
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; }
}