自带的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("修改成功"); }