自帶的Tables會有自動分頁，搜索等一些動能，很方便，唯一的不足就是添加，修改，刪除數據需要刷新頁面，並不能靜態。
下面說的是如何不刷新頁面（Ajax）去執行增，刪，改操作。
需要用到的樣式，JS庫（需要自己去復制到自己的項目中）
@*bootstrap 樣式*@ <link href="~/Content/css/bootstrap.css" rel="stylesheet" /> @*datatable 樣式*@ <link rel="stylesheet" type="text/css" href="/Content/media/css/jquery.dataTables.css"> @*jquery*@ <script type="text/javascript" charset="utf8" src="/Content/media/js/jquery.js"></script> @*DataTables*@ <script type="text/javascript" charset="utf8" src="/Content/media/js/jquery.dataTables.js"></script> @*bootstrap*@ <script src="~/Content/js/bootstrap.js"></script>
前台：
<input type="button" id="btn" value="Add Data" /> @*datatables表格結構*@ <table id="example" class="display" cellspacing="0" width="100%"> <thead>（頭部） <tr> <th>id</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th> <th>修改</th>
</tr> </thead>
<tbody>（內容） 這里就是呈現數據的位子 </tbody> <tfoot>（腳部） <tr> <th>id</th> <th>a</th> <th>b</th> <th>c</th> <th>d</th>
<th>修改</th> </tr> </tfoot> </table> @*模態框開始*@ （添加的模態框--這里演示的是固定的） 可以把添加的用布局頁封裝，在動態加載到模態框中 做修改一樣的，這里只演示添加 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4> </div> <div class="modal-body"> @*屬性a*@ <div class="control-group success"> <label class="control-label" for="a">A</label> <div class="controls"> <input type="text" id="a" name="a"> <span class="help-inline">屬性a！！！</span> </div> </div> @*屬性b*@ <div class="control-group success"> <label class="control-label" for="b">B</label> <div class="controls"> <input type="text" id="b" name="b"> <span class="help-inline">屬性b！！！</span> </div> </div> @*屬性c*@ <div class="control-group success"> <label class="control-label" for="c">C</label> <div class="controls"> <input type="text" id="c" name="c"> <span class="help-inline">屬性c！！！</span> </div> @*屬性d*@ <div class="control-group success"> <label class="control-label" for="d">D</label> <div class="controls"> <input type="text" id="d" name="d"> <span class="help-inline">屬性d！！！</span> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" id="commit">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> @*模態框結束*@
前台JS代碼：
<script> $(function () { //初始化 加載Tbales中的數據 $(document).ready(function () { $('#example').DataTable({ "ajax": "@Url.Action("data")", //動態加載數據（注意json格式） "processing": true,
"columnDefs": [{ //添加一列 "targets": 5, //目標列 （這里第6列），一般是顯示操作列 "data": null, //固定為Null "defaultContent": "<button id='editrow' type='button'></button>" //這列里面的內容，一個修改的按鈕 }); //模態框 $("#btn").click(function () { $("#myModal").modal('show'); }); //提交 $("#commit").click(function () { //參數對象 var p = { a: $("#a").val(), b: $("#b").val(), c: $("#c").val(), d: $("#d").val() }
//注意：這里使用的是自動裝配，表中的字段就是a,b,c,d。 只要把你表中的字段賦值就行，這里沒有表單提交，所以用Js代碼賦值，賦值了，P對象就有值了 $.get("@Url.Action("Insert")", p, function (data) { //回調隱藏 $("#myModal").modal('hide'); var t = $('#example').DataTable();
//第一種 //手動添加行 其實是做了兩步，這個是全部都不刷新，做的一個假像
//1，在后台已經把數據加載到數據庫中了
//2，手動改表格中的數據，這行數據並不是數據庫中的數據，恰巧這行數據跟數據庫中的數據一模一樣，給人一種假象，數據添加成功 t.row.add([ data, //返回編號 p.a, p.b, p.c, p.d ]).draw(false);
//第二種
//或者，刷新表格
$("#example").DataTable().ajax.reload();//重新加載表格，只刷新表格，不刷新頁面
//兩種方法取一種即可 修改，刪除都是差不多的 }); }); }); }); </script>
后台代碼：
DataClasses1DataContext dcdc = new DataClasses1DataContext(); //EF關系，連接數據庫，對數據進行操作，一個LinQ to SQL類 // // GET: /Demo/ public ActionResult Index() { return View(); } //初始化數據 表格里面的內容需要這個方法來加載 public ActionResult Data() { List<string[]> list = new List<string[]>(); //一個字符串數組集合，一個數組代表一行數據，相當於表中的一行數據，集合可以保存這張表中所有的數據 foreach (var item in dcdc.Table) //循環這張表，用來存數據 {
//需要顯示的字段全部存到數組中，可以多張表，這里只加載一張表
string[] a = new[] { item.Id.ToString(), item.a, item.b, item.c, item.d };
list.Add(a);
}
var data = new { data = list }; //轉成Json格式
//datatable要求的數據格式
return Json(data, JsonRequestBehavior.AllowGet);
}
//添加一條記錄
public ActionResult Insert(Table t)
{
//添加
dcdc.Table.InsertOnSubmit(t);
dcdc.SubmitChanges();
//返回編號
var id = dcdc.Table.Max(x => x.Id);
return Content(id.ToString()); //返刷新表格的話，返回的數據隨意
}
}
值得一提，MVC中添加，修改都是兩個一樣的方法名，只是參數不一樣
在一個方法的頭部有 [xxx]，就是聲明這個方法是什么，Get，Post,過濾器都是在頭部聲明的
添加:
[HttpGet] //聲明Get訪問 用來做顯示 public ActionResult AddProImg() { return View(); } [HttpPost] //聲明Post訪問 用來對數據庫執行操作 public ActionResult AddProImg(ProductImg img) { img.CreateTime = DateTime.Now; sc.ProductImg.InsertOnSubmit(img); sc.SubmitChanges(); return Content("Success"); }
修改：
[HttpGet] //顯示數據 public ActionResult EditProImg(int? id) { ViewData.Model = sc.ProductImg.Where(x => x.ImgID == id.Value).First(); ViewBag.product = sc.ProductProperty.AsEnumerable(); return View(); } [HttpPost] //對數據庫進行操作 public ActionResult EditProImg(ProductImg img) { var result = sc.ProductImg.Where(x => x.ImgID == img.ImgID).First(); result.Description = img.Description; result.ProperID = img.ProperID; result.ImgName = img.ImgName; sc.SubmitChanges(); return Content("修改成功"); }