自带的Tables会有自动分页，搜索等一些动能，很方便，唯一的不足就是添加，修改，删除数据需要刷新页面，并不能静态。
下面说的是如何不刷新页面（Ajax）去执行增，删，改操作。
需要用到的样式，JS库（需要自己去复制到自己的项目中）
@*bootstrap 样式*@ <link href=http://www.mamicode.com/"~/Content/css/bootstrap.css" rel=http://www.mamicode.com/"stylesheet" /> @*datatable 样式*@ <link rel=http://www.mamicode.com/"stylesheet" type=http://www.mamicode.com/"text/css" href=http://www.mamicode.com/"/Content/media/css/jquery.dataTables.css"> @*jquery*@ <script type=http://www.mamicode.com/"text/javascript" charset=http://www.mamicode.com/"utf8" src=http://www.mamicode.com/"/Content/media/js/jquery.js"></script> @*DataTables*@ <script type=http://www.mamicode.com/"text/javascript" charset=http://www.mamicode.com/"utf8" src=http://www.mamicode.com/"/Content/media/js/jquery.dataTables.js"></script> @*bootstrap*@ <script src=http://www.mamicode.com/"~/Content/js/bootstrap.js"></script>
前台：
<input type=http://www.mamicode.com/"button" id=http://www.mamicode.com/"btn" value=http://www.mamicode.com/"Add Data" />
@*datatables表格结构*@
<table id=http://www.mamicode.com/"example" class=http://www.mamicode.com/"display" cellspacing=http://www.mamicode.com/"0" width=http://www.mamicode.com/"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=http://www.mamicode.com/"modal fade" id=http://www.mamicode.com/"myModal" tabindex=http://www.mamicode.com/"-1" role=http://www.mamicode.com/"dialog" aria-labelledby=http://www.mamicode.com/"myModalLabel" aria-hidden=http://www.mamicode.com/"true">
<div class=http://www.mamicode.com/"modal-dialog">
<div class=http://www.mamicode.com/"modal-content">
<div class=http://www.mamicode.com/"modal-header">
<button type=http://www.mamicode.com/"button" class=http://www.mamicode.com/"close" data-dismiss=http://www.mamicode.com/"modal" aria-hidden=http://www.mamicode.com/"true">×</button>
<h4 class=http://www.mamicode.com/"modal-title" id=http://www.mamicode.com/"myModalLabel">模态框（Modal）标题</h4>
</div>
<div class=http://www.mamicode.com/"modal-body">
@*属性a*@
<div class=http://www.mamicode.com/"control-group success">
<label class=http://www.mamicode.com/"control-label" for=http://www.mamicode.com/"a">A</label>
<div class=http://www.mamicode.com/"controls">
<input type=http://www.mamicode.com/"text" id=http://www.mamicode.com/"a" name=http://www.mamicode.com/"a">
<span class=http://www.mamicode.com/"help-inline">属性a！！！</span>
</div>
</div>
@*属性b*@
<div class=http://www.mamicode.com/"control-group success">
<label class=http://www.mamicode.com/"control-label" for=http://www.mamicode.com/"b">B</label>
<div class=http://www.mamicode.com/"controls">
<input type=http://www.mamicode.com/"text" id=http://www.mamicode.com/"b" name=http://www.mamicode.com/"b">
<span class=http://www.mamicode.com/"help-inline">属性b！！！</span>
</div>
</div>
@*属性c*@
<div class=http://www.mamicode.com/"control-group success">
<label class=http://www.mamicode.com/"control-label" for=http://www.mamicode.com/"c">C</label>
<div class=http://www.mamicode.com/"controls">
<input type=http://www.mamicode.com/"text" id=http://www.mamicode.com/"c" name=http://www.mamicode.com/"c">
<span class=http://www.mamicode.com/"help-inline">属性c！！！</span>
</div>
@*属性d*@
<div class=http://www.mamicode.com/"control-group success">
<label class=http://www.mamicode.com/"control-label" for=http://www.mamicode.com/"d">D</label>
<div class=http://www.mamicode.com/"controls">
<input type=http://www.mamicode.com/"text" id=http://www.mamicode.com/"d" name=http://www.mamicode.com/"d">
<span class=http://www.mamicode.com/"help-inline">属性d！！！</span>
</div>
</div>
</div>
</div>
<div class=http://www.mamicode.com/"modal-footer">
<button type=http://www.mamicode.com/"button" class=http://www.mamicode.com/"btn btn-default" data-dismiss=http://www.mamicode.com/"modal">关闭</button>
<button type=http://www.mamicode.com/"button" class=http://www.mamicode.com/"btn btn-primary" id=http://www.mamicode.com/"commit">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
@*模态框结束*@
前台JS代码：