直接上乾貨：

首先：引入datatables.js和jquery.js和bootstrap.jsp等一些檔案：

如：

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">
<link href="datatables-responsive/dataTables.responsive.css" rel="stylesheet">
<script src="vendor/jquery/jquery.min.js"></script>
<script src="datatables/js/jquery.dataTables.min.js"></script>
<script src="datatables-plugins/dataTables.bootstrap.min.js"></script>
<script src="datatables-responsive/dataTables.responsive.js"></script>
 

1.html

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-body">
				<table class="table table-bordered" id="ht-dataTables">				
		<thead>
            <tr>
           		<th>id</th>
                <th>aaa</th>
                <th>bbb</th>
                <th>ccc</th>
                <th>ddd</th>
                <th>eee</th>
            </tr>
        </thead>
				</table>
				<!-- /.table-responsive -->
			</div>
			<!-- /.panel-body -->
		</div>
		<!-- /.panel -->
	</div>
	<!-- /.col-lg-12 -->
</div>
 

<script type="text/javascript">
 $(function () {
 //提示資訊
 var lang = {
 "sProcessing": "處理中...",
 "sLengthMenu": "每頁 _MENU_ 項",
 "sZeroRecords": "沒有匹配結果",
 "sInfo": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。",
 "sInfoEmpty": "當前顯示第 0 至 0 項，共 0 項",
 "sInfoFiltered": "(由 _MAX_ 項結果過濾)",
 "sInfoPostFix": "",
 "sSearch": "搜尋:",
 "sUrl": "",
 "sEmptyTable": "表中資料為空",
 "sLoadingRecords": "載入中...",
 "sInfoThousands": ",",
 "oPaginate": {
 "sFirst": "首頁",
 "sPrevious": "上頁",
 "sNext": "下頁",
 "sLast": "末頁",
 "sJump": "跳轉"
 },
 "oAria": {
 "sSortAscending": ": 以升序排列此列",
 "sSortDescending": ": 以降序排列此列"
 }
 };
 
 //初始化表格
 var table = $("#ht-dataTables").dataTable({
 language:lang, //提示資訊
 autoWidth: false, //禁用自動調整列寬
 stripeClasses: ["odd", "even"], //為奇偶行加上樣式，相容不支援CSS偽類的場合
 processing: true, //隱藏載入提示,自行處理
 serverSide: true, //啟用伺服器端分頁
 searching: false, //禁用原生搜尋
 orderMulti: false, //啟用多列排序
 order: [], //取消預設排序查詢,否則複選框一列會出現小箭頭
 renderer: "bootstrap", //渲染樣式：Bootstrap和jquery-ui
 pagingType: "simple_numbers", //分頁樣式：simple,simple_numbers,full,full_numbers
 columnDefs: [{
 "targets": 'nosort', //列的樣式名
 "orderable": false //包含上樣式名‘nosort'的禁止排序
 }],
 ajax: function (data, callback, settings) {
 //封裝請求引數
 var param = {};
 param.limit =data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
 param.start = data.start;//開始的記錄序號
 param.page = (data.start / data.length)+1;//當前頁碼
 //ajax請求資料
 $.ajax({
  type: "GET",
  url: "tradeRecord_query",
  cache: false, //禁用快取
  data: param, //傳入組裝的引數
  dataType: "json",
  success: function (result) {
  //封裝返回資料
  var returnData = {};
  returnData.draw = data.draw;//這裡直接自行返回了draw計數器,應該由後臺返回
  returnData.recordsTotal = result.recordsTotal;//返回資料全部記錄
  returnData.recordsFiltered = result.recordsFiltered;//後臺不實現過濾功能，每次查詢均視作全部結果
  returnData.data = result.data;//返回的資料列表
  //console.log(returnData);
  //呼叫DataTables提供的callback方法，代表資料已封裝完成並傳回DataTables進行渲染
  //此時的資料需確保正確無誤，異常判斷應在執行此回撥前自行處理完畢
  callback(returnData);
  }
 });
 },
 //列表表頭欄位
 columns: [
	 { "data": "id" ,"orderable":false},
	 { "data": "transType" },
     { "data": "description" },
     { "data": "engDisplay" },
     { "data": "chinDisplay" },
     {
          "data": null, 
          "className": "center",
          "defaultContent": '<button type="button" id="editrow" data-toggle="modal" class="btn btn-outline btn-circle btn-sm purple"><i class="fa fa-edit"></i></button>  <button id="delrow" class="btn btn-outline btn-circle dark btn-sm black"><i class="fa fa-trash-o"></i></button>'
      }
 ]
 }).api();
 //此處需呼叫api()方法,否則返回的是JQuery物件而不是DataTables的API物件
 });
 
 //表資料刪除
 $('#ht-dataTables').on( 'click','button#delrow',function (even) {
      even.preventDefault;//方法阻止元素髮生預設的行為（例如，當點選提交按鈕時阻止對錶單的提交）。
      if(confirm("確定刪除該資訊?") == false){
         return;
      }else{
    	  /* 得到當前物件的值 */
         var data = $("#ht-dataTables").DataTable().row( $(this).parents('tr') ).data();
         $.ajax({
             url: 'tradeRecord_delete',
             type: 'POST',
             dataType: 'json',
             data: {"id":data.id},
 /* success是指後臺資料庫的表麼？如果是，先將success表中相關的資料封裝在list裡面，然後將list轉為json資料格式的字串返回到前臺。如果你用的是jQuery的ajax方法，那麼記得在前臺接受的時候一定要指定資料接受格式為json,否則你得到是一個json的字串，不是一個json的物件 */
          success: function(data){
        	  alert(data.success);
                if (data.success =="success" ){
                     alert('刪除成功!');
                     start = $("#ht-dataTables").dataTable().fnSettings()._iDisplayStart;//從第幾行開始顯示資料
                     total = $("#ht-dataTables").dataTable().fnSettings().fnRecordsDisplay();//
                     alert(start);
                     alert(total);
                     window.location.reload();
                     if((total-start) == 1){
                         if (start > 0) {
                             $("#ht-dataTables").dataTable().fnPageChange( 'previous', true);//已回到上一頁中 
/* 注意$("#sorting-advanced").dataTable().fnPageChange( ‘previous‘); 是不行的，必需進行重新整理，否則頁面中顯示的iDisplayStart會從cookie中取得，還是刪除前的iDisplayStart */
                         }
                     }
                }
             },
             error:function(data){
            	 	alert(data.success);
               		console.log(data);
                 	alert('伺服器無響應，請聯絡管理員!');
             }
         })
     }
  });
 
</script>
 

3.controller

@Override
@RequestMapping(value="tradeRecord_query",method=RequestMethod.GET)//list
@ResponseBody
public String beanList(int limit,int start,int page,HttpSession httpSession, Model m) {
	System.out.println(limit+"--->"+start+"--->"+page);
	@SuppressWarnings("unchecked")
	List<TransactionTypeBean> list = (List<TransactionTypeBean>) this.service.find("beanList", "TransactionTypeBean", null);
	System.out.println(start+"--->"+(start+limit)+"--->"+list.size());
	System.out.println(list.get(0).getId()+"-------->");
	List<TransactionTypeBean> pageList=null;
	HashMap<String,Object> map = new HashMap<String,Object>();
	if(list.size()<start+limit){
		pageList=list.subList(start, list.size());
	}else{
	        pageList=list.subList(start, (start+limit));
	}
	        System.out.println(pageList.size()+"------->");
		
		map.put("recordsTotal", list.size());
		map.put("recordsFiltered", list.size());
		map.put("data", pageList);	
		String s = this.jsonUtil.toJson(map);
		return s;
	}
@Override
@ResponseBody
@RequestMapping(value="tradeRecord_delete",method=RequestMethod.POST)//delete
public String beanDelete(TransactionTypeBean bean, HttpSession httpSession, Model m) throws Exception {
	System.out.println(bean.getId()+"----------->");
	HashMap<String,Object> map = new HashMap<String,Object>();
	map.put("success", "success");
	try {
		service.delete(bean);
	} catch (Exception e) {
		e.printStackTrace();
	}
		String data = this.jsonUtil.toJson(map);
		return data;
	}

有什麼疑問，和建議大家可以留言討論。