強大的表格控制元件-Datatables
阿新 • • 發佈：2019-01-30
背景介紹
是不是習慣了EasyUI封裝的DataGrid表格，傳入一個json串，就可以自動載入資料，顯示分頁，還能實現一些特殊需求，如行內編輯，操作列等。而使用bootstrap表格的話，則需要完全自己手寫table和分頁控制元件，並且將兩者組合到一起，才是個完整的表格，程式碼量大不說，如果需要實現一些特殊的需求，行內編輯等那就更加繁瑣了。
Datatables
所以我尋找到了一款bootstrap風格的第三方表格外掛：datatables。
Datatables是一款jquery表格外掛。它是一個高度靈活的工具，可以給任何HTML表格新增高階的互動功能。提供分頁，即時搜尋和排序等功能，另外官網還給出了一些實現個性化功能的demo，如行內編輯，行摺疊特效等。
如何使用
① 引入css和js檔案
<link href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-3.3.0-dist/dist/css/bootstrap-responsive.min.css" rel="stylesheet">
<!—datatables的樣式檔案，我修改了其預設分頁按鈕的樣式，所以加了字尾itoo ，和官網下載的不一樣-->
<link href="bootstrap-3.3.0-dist/dist/css/jquery.dataTables-itoo.css" <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->
<script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
<!-- datatables JavaScript 檔案 --> 預設分頁樣式：
修改後樣式：
附件： 上述檔案均打包在附件中，點我下載。
② Html程式碼
<body>
<div class="row-fluid" style="margin-top: 20px">
<div class="span1"></div>
<div class="span10">
<table id="table_local" class="row-border hover order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>教師編號</th>
<th>姓名</th>
<th>組織機構</th>
<th>課程型別</th>
<th>課程名稱</th>
<th>總得分</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>建立一個table標籤，<thead>和空的<tbody>即可。
③JS程式碼
<script type="text/javascript">
var table;
$(document).ready(function() {
var lastIdx = null;
<!--datatables表格初始化方法-->
table = $('#table_local').DataTable({
//通過ajax向後臺controller請求資料
ajax : {
url : "queryPageAssessResult",
dataSrc : " coursedata ",
data : function ( d ) {
var searchContent = $('#searchContent').val();
//新增額外的引數傳給伺服器
d.extra_search = searchContent;
}
},
//繫結列資料，名字和json串裡的key相同，只有這裡綁定了表格中才會顯示資料
columns : [
{data : 'teacherCode'},
{data : 'teacherName'},
{data : 'teacherDepartment'},
{data : 'courseType'},
{data : 'courseName'},
{data : 'avgScore'}
],
processing : true, //開啟資料載入時的等待效果
serverSide : true,//開啟後臺分頁
ordering : false,//是否啟用排序
searching : false,//是否 啟用模糊搜尋
//當處理大資料時，延遲渲染資料，有效提高Datatables處理能力
deferRender : true,
//國際化設定（設定中文顯示）
language : {
lengthMenu : '<div style="float:left;height:33px;line-height:33px;overflow:hidden;text-align:center" >每頁條數：</div><div style="float:left"><select class="form-control input-xsmall" style="float:right">'
+ '<option value="1">1</option>'
+ '<option value="5">5</option>'
+ '<option value="10">10</option>'
+ '<option value="20">20</option>'
+ '<option value="30">30</option>'
+ '<option value="40">40</option>'
+ '<option value="50">50</option>'
+ '</select></div>',//左上角的分頁大小顯示。
search : '<span class="label label-success">搜尋：</span>',//右上角的搜尋文字，可以寫html標籤
paginate : {//分頁的樣式內容。
previous : "上一頁",
next : "下一頁",
first : "第一頁",
last : "最後"
},
zeroRecords : "沒有內容",//table tbody內容為空時，tbody的內容。
//下面三者構成了總體的左下角的內容。
info : "共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，共_MAX_ 條 ",//左下角的資訊顯示，大寫的詞為關鍵字。
infoEmpty : "0條記錄",//篩選為空時左下角的顯示。
infoFiltered : ""//篩選之後的左下角篩選提示，
},
paging : true,
pagingType : "full_numbers"//分頁樣式的型別full_numbers
});
$("#table_local_filter input[type=search]").css({
width : "auto"
});//右上角的預設搜尋文字框，不寫這個就超出去了。
//滑鼠經過時高亮
$('#table_local tbody').on( 'mouseover', 'td', function () {
var colIdx = table.cell(this).index().column;
if ( colIdx !== lastIdx ) {
$( table.cells().nodes() ).removeClass( 'highlight' );
$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
}
} ).on( 'mouseleave', function () {
$( table.cells().nodes() ).removeClass( 'highlight' );
} );
//點選某行後高亮
$('#table_local tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
//滑鼠雙擊事件，彈出提示。
$('#table_local tbody').on('dblclick','tr',function() {
//獲取該行資料
var data = table.row(this).data();
//做一些其他操作
});
});
</script>其中ajax.data引數和標準JQuery.ajax的data引數作用類似,但效果有所不同.僅當serverSide引數為true的時候,引數屬性才有意義,當serverSide開啟,DataTables元件會自行封裝一個資訊類傳送給服務端,而ajax.data僅僅是對這個資訊類進行調整和新增.
新增方式, ajax.data可以直接賦值一個物件,這個物件的屬性會新增到原資訊類裡面去一起傳送到服務端.例如:
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": {
"user_id": 451
}
}
} );另外一種選擇是傳入一個方法,方法的引數就是當前傳送到伺服器的資訊類,在方法中可以修改這個資訊類.
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
} );
④ 後臺controller程式碼
/**
* @Description: 課程評估結果查詢
* @author 牛遷遷
* @date 2015年12月9日 上午12:35:21
* @param request
* @param response
* @throws UnsupportedEncodingException
*/
@SuppressWarnings(
{ "unchecked", "rawtypes" })
@RequestMapping(value = "/queryPageAssessResult", method = RequestMethod.GET)
public void queryPageAssessResult(HttpServletRequest request,
HttpServletResponse response) throws UnsupportedEncodingException
{
request.setCharacterEncoding("UTF-8");
// 資料起始位置
String start = request.getParameter("start");
// 資料長度 每頁多少條資料
String length = request.getParameter("length");
// 獲取前臺傳遞過來的查詢條件
String conditions = request.getParameter("extra_search");
// 進行轉碼操作，轉成UTF-8編碼格式
conditions = new String(conditions.getBytes("ISO-8859-1"), "UTF-8");
// 獲取所操作的庫名稱
String dbName = "itoo_exam";
// 轉換分頁引數
int pageSize = Integer.parseInt(length);
int pageNum = Integer.parseInt(start) / pageSize + 1;
System.out.println("每頁條數：======" + pageSize);
System.out.println("當前頁號：======" + pageNum);
// 轉Json工具類
toJsonUtil = new JacksonJsonUntil();
// 例項化一個分頁類
PageEntity<CourseAssessResult> pageCourseAssessResult = new PageEntity<CourseAssessResult>();
try
{
// 第1種情況：無條件分頁查詢
if (conditions == null || conditions == "")
{
pageCourseAssessResult = courseAssessResultBean
.queryPageCourseAssessResult(pageNum, pageSize, dbName);
}
else
{
// 第2種情況：有條件分頁查詢
pageCourseAssessResult = courseAssessResultBean
.queryPageCourseAssessResultByCondition(pageNum,
pageSize, conditions, dbName);
}
// 如果查詢資訊為空也重新繫結資料。
if (pageCourseAssessResult.getRows() == null) {
List<CourseAssessResult> courseTypeList = new ArrayList<CourseAssessResult>();
pageCourseAssessResult.setRows(courseTypeList);
}
System.out.println(pageCourseAssessResult.getTotal());
//宣告一個map，往前臺傳值
Map<Object, Object> info = new HashMap<Object, Object>();
//查詢到的實體資訊
info.put("coursedata", pageCourseAssessResult.getRows());
//實體資訊總條數
info.put("recordsTotal", pageCourseAssessResult.getTotal());
toJsonUtil.beanToJson(response, info);
}
catch (Exception e)
{
e.printStackTrace();
}
}Controller的作用主要是獲取前臺傳遞過來的引數，並根據引數呼叫Server層方法查詢到結果，然後將結果按照datatables指定的格式返回給前臺。這個格式就是：
//宣告一個map，往前臺傳值
Map<Object, Object> info = new HashMap<Object, Object>();
//查詢到的實體資訊
info.put("coursedata", pageCourseAssessResult.getRows());
//實體資訊總條數
info.put("recordsTotal",pageCourseAssessResult.getTotal());coursedata這個名稱是咱們在JS裡，dataSrc : " coursedata "指定的，意思是載入返回的資料來源，如果返回的集合不是這個名稱，將不能繫結值；recordsTotal是記錄總數，引數名稱必須是這個，沒商量。
⑤ 顯示效果
小結
本篇部落格主要講解了Datatables的使用，我們喜歡EasyUI封裝的功能，同時也中意Bootstrap封裝的樣式，要想魚和熊掌兼得，那就需要用Datatables啦。
學會站在巨人的肩膀上，哈哈。。