IKC項目總結
一、認證難題管理模塊
1、 如何使用datatables進行獲取數據內容
datatables簡介：Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。
-
分頁，即時搜索和排序
-
幾乎支持任何數據源：DOM， javascript， Ajax 和 服務器處理
-
支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation
-
各式各樣的擴展: Editor, TableTools, FixedColumns ……
-
豐富多樣的option和強大的API
-
支持國際化
-
超過2900+個單元測試
-
免費開源 （ MIT license ）！ 商業支持
-
更多特性請到官網查看
如圖：從數據庫中訪問到的數據存到list集合中，並且將list集合返回給前台頁面
按照官網的要求，需要用戶自己將所需要js和css引入進來
-
cdn方式
-
自己下載引入方式
自己下載后引入：
<script type="text/javascript" src="/js/assets/data-table/datatables.min.js"></script> <script type="text/javascript" src="/js/assets/data-table/dataTables.bootstrap4.min.js"></script> <script type="text/javascript" src="/js/assets/data-table/dataTables.buttons.min.js"></script> <script type="text/javascript" src="/js/assets/data-table/buttons.bootstrap.min.js"></script> <script type="text/javascript" src="/js/assets/data-table/jszip.min.js"></script> <script type="text/javascript" src="/js/assets/data-table/vfs_fonts.js"></script> <script type="text/javascript" src="/js/assets/data-table/buttons.html5.min.js"></script> <script type="text/javascript" src="/js/assets/data-table/buttons.print.min.js"></script> <script type="text/javascript" src="/js/assets/data-table/buttons.colVis.min.js"></script> <script type="text/javascript" src="/js/assets/init/datatables-init.js"></script>引入后項目中必須要有bootstrap的css和js。也需要有對datatables的初始化的js文件
當引入后就需要將數據和table進行綁定：
<table id="declarationList" class="table table-sm table-striped table-bordered text-center table-hover" style="margin-left: -32px;padding-right: 0px;width: -webkit-fill-available"> <thead> <tr> <th> <input type="checkbox" class="myid2" name="checkAll" id="checkAll"> <label for="checkAll" style="margin-bottom: 0px">難題序號</label> </th> <th>姓名</th> <th>難題名稱</th> <th>難題級別</th> <th>所屬行業</th> <th>企業</th> <th>關鍵字</th> <th>導出</th> </tr> </thead> <tbody> <!--開始遍歷結果集--> <!--開始遍歷結果集--> <#if casePassList??> <#list casePassList as cases> <tr> <td> <label class="checkbox-inline"> <input type="checkbox" class="myid2" name="items" id="items" value="${cases.proId}">${cases.proId} </label> </td> <td> ${cases.application.appName!""} </td> <!--標題，a屬性--> <td> <span> <a href="/manage/case/displayCase/${cases.proId}">${cases.proTitle}</a> </span> </td> <!--難題級別--> <td>${cases.proLevel}</td> <!--所屬行業--> <td>${cases.proIndustry}</td> <!--來源企業--> <td> ${cases.proCompany} </td> <!--關鍵字--> <td> ${cases.proKeyword} </td> <!--操作--> <td> <a id="a_exportAllPassCase" style="margin-right: 10px;" href="/manage/case/exportApproveCase/${cases.proId}"><i class="fa fa-file-word-o" aria-hidden="true"></i>全部</a> <a id="a_exportPassSimpleCase" href="/manage/case/exportSimpleApproveCase/${cases.proId}"><i class="fa fa-file-word-o" aria-hidden="true"></i>簡介</a> </td> </tr> </#list> </#if> </table>一般來說，如果控制台報識別不了datatables，那就是沒有初始化表格
$(document).ready(function () { $('#declarationList').DataTable(); });這樣表格就可以使用了；需要注意的是，行和列需要保持一致，就是有多少個th對應多少個td，否則會alert出錯誤，alert的內容大概就是一個超鏈接，該鏈接會直接導向官網的報錯信息。
上述的這種是最簡單的獲取數據，直接從控制台獲取得到的數據，項目中出來一個新的需求：用戶需要進行條件查詢。
然后將條件查詢的結果渲染到datatables中去。這就是異步獲取數據。官網的介紹datatables可ajax異步獲取的數據形式有三種：
官方文檔ajax 通俗的講就是獲取數據源，也就是從后台獲取到的list集合如何將該集合傳到前台頁面，三種方式：
-
第一種通過數組
-
第二種通過js的object對象傳遞
-
第三種通過staff屬性傳遞
-
其實這些傳遞的方式不需要你管，我在使用的過程中，傳過來后直接使用的就是第一種通過array數組或者是json數據傳遞過來，你只需要做的是當你點擊查詢的之后，獲取到數據，然后在回調函數里面需要進行重新渲染。具體如下：
$("#btn_search").on('click', function () {
//點擊后，需要想后台傳輸數據
//0,申請人
var pname = $("#proName").val();
if (pname == null) {
pname = "";
}
//1,傳送難度級別
var pLevel = $("#proLevel option:selected").val();
if (pLevel == null) {
pLevel = "";
}
// 2,傳輸所屬行業
var pIndustry = $("#proIndustry").val();
if (pIndustry == null) {
pIndustry = "";
}
//3,傳輸來源企業
var pCompany = $("#proCompany").val();
if (pCompany == null) {
pCompany = "";
}
//4,傳輸關鍵字,
var keyword = $("#proKeyword").val();
if (keyword == null) {
keyword = "";
}
//5,傳輸實現功能
var pFunction = $("#proFunction").val();
if (pFunction == null) {
pFunction = "";
}
//6,傳輸難題名稱
var pTitle = $("#proTitle").val();
if (pTitle==null){
pTitle="";
}
//7，傳值，證明是通過的
var pState = '1';
console.log(pState);
if (pname.length == 0 && pLevel.length == 0 && pIndustry.length == 0 && pCompany.length == 0 && keyword.length == 0 && pFunction.length == 0 && pTitle.length == 0 && pTitle.length == 0) {
alert("輸入參數有誤，請重新輸入");
} else {
$.ajax({
type: "post",
url: "/manage/case/search",
dataType: "json",
data:
{
name: pname,
title: pTitle,
level: pLevel,
industry: pIndustry,
company: pCompany,
keyword: keyword,
state: pState
},
error: function () {
},
success: function (data) {
console.log(data);
if (data.searchResults==''||data.searchResults==null||data.searchResults.length==0){
alert("查無此數據，請重試！");
clearPassSearchContent();
}else{
$('#declarationList').DataTable({
destroy: true,
searching:true,
paging: true,//表格分頁
data: data.searchResults,
columns: [
{
data: 'proId', render: function (data, type, row, meta) {
return '<label class="checkbox-inline"><input type="checkbox" class="myid2" name="items" id="items" value="' + row.proId + '">' + row.proId + '</label>'
}
},
{data: 'application.appName'},
{
data: 'proTitle', render: function (data, type, row, meta) {
return '<span><a href="/manage/case/displayCase/' + row.proId + '">' + row.proTitle + '</a></span>'
}
},
{data: 'proLevel'},
{data: 'proIndustry'},
{data: 'proCompany'},
{data: 'proKeyword'},
{
data: '', render: function (data, type, row, meta) {
return ' <a id="a_exportAllPassCase" href="/manage/case/exportApproveCase/'+row.proId+'" style="margin-right: 10px;"><i class="fa fa-file-word-o" aria-hidden="true"></i>全部</a>\n' +
' <a id="a_exportPassSimpleCase" href="/manage/case/exportSimpleApproveCase/'+row.proId+'"><i class="fa fa-file-word-o" aria-hidden="true"></i>簡介</a>'
}
}
],
language: {
"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": "末頁"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
}
}
});
}
});
當初寫的代碼有點啰嗦，有好多可以改進的地方，比如，
-
所有的var都改成let；
-
var pname = $("#proName").val();
if (pname == null) {
pname = "";
}
之所以需要判斷是否為空，是因為由於是條件搜索，所以有的條件可以為空，但是如果為空的話，如果不置為空字符串，將數據傳到后台的時候，直接報空指針異常的錯誤，所以在這里進行設置為空字符串。可以改進的地方，判斷是否為空，在js中可以直接使用 if(!pname)進行判斷，簡化代碼
當判斷完所有的時候，用戶將所需要查找的數據發送到后台，比如查找申請人是cym，難題名稱為測試難題，所屬行業為制造業的數據，后台的代碼先不贅述。總之數據庫如果有數據的話就返回一個list集合，然后傳到控制台后是一個array數組，接下來就是處理這個數組，並且將數組中的數據給datatable渲染。
$('#declarationList').DataTable({
destroy: true,
searching:true,
paging: true,//表格分頁
data: data.searchResults,
columns: [
{
data: 'proId', render: function (data, type, row, meta) {
return '<label class="checkbox-inline"><input type="checkbox" class="myid2" name="items" id="items" value="' + row.proId + '">' + row.proId + '</label>'
}
},
{data: 'application.appName'},
{
data: 'proTitle', render: function (data, type, row, meta) {
return '<span><a href="/manage/case/displayCase/' + row.proId + '">' + row.proTitle + '</a></span>'
}
},
{data: 'proLevel'},
{data: 'proIndustry'},
{data: 'proCompany'},
{data: 'proKeyword'},
{
data: '', render: function (data, type, row, meta) {
return ' <a id="a_exportAllPassCase" href="/manage/case/exportApproveCase/'+row.proId+'" style="margin-right: 10px;"><i class="fa fa-file-word-o" aria-hidden="true"></i>全部</a>\n' +
' <a id="a_exportPassSimpleCase" href="/manage/case/exportSimpleApproveCase/'+row.proId+'"><i class="fa fa-file-word-o" aria-hidden="true"></i>簡介</a>'
}
}
],
language: {
"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": "末頁"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
如代碼所示，destroy: true, 這行是必須的，因為重新渲染的數據，所以必需將表格摧毀后重新渲染，searching:true,
paging: true,//表格分頁
這些表示可以搜索，表格進行分頁。
data: data.searchResults
這行的意思是表格的數據源是什么，也就是你model里面設置的返回list對象，比如：
List<Problem> results = caseService.searchByConditions(name, title, level, industry, company, keyword, state);
returnMap.put("searchResults", results);
3、4兩行代碼是后台查詢的結果。
columns: [
{
data: 'proId', render: function (data, type, row, meta) {
return '<label class="checkbox-inline"><input type="checkbox" class="myid2" name="items" id="items" value="' + row.proId + '">' + row.proId + '</label>'
}
},
{data: 'application.appName'},
{
data: 'proTitle', render: function (data, type, row, meta) {
return '<span><a href="/manage/case/displayCase/' + row.proId + '">' + row.proTitle + '</a></span>'
}
},
{data: 'proLevel'},
{data: 'proIndustry'},
{data: 'proCompany'},
{data: 'proKeyword'},
{
data: '', render: function (data, type, row, meta) {
return ' <a id="a_exportAllPassCase" href="/manage/case/exportApproveCase/'+row.proId+'" style="margin-right: 10px;"><i class="fa fa-file-word-o" aria-hidden="true"></i>全部</a>\n' +
' <a id="a_exportPassSimpleCase" href="/manage/case/exportSimpleApproveCase/'+row.proId+'"><i class="fa fa-file-word-o" aria-hidden="true"></i>簡介</a>'
}
}
],
columns：表示的是渲染的每列的數據
data: 'proId', render: function (data, type, row, meta) {
return '<label class="checkbox-inline"><input type="checkbox" class="myid2" name="items" id="items" value="' + row.proId + '">' + row.proId + '</label>'
這行就相當於html網頁中的
<label class="checkbox-inline">
<input type="checkbox" class="myid2" name="items" id="items" value="${cases.proId}">${cases.proId}
</label>
只不過需要渲染，所以使用了datatable中的官方方法。其中需要將${cases.proId}改為row.proId，注意單引號的位置，正確的書寫------“‘+row.proId+’”；之后的每行都是，如果沒有數據可以設置為空，可以參考最后一行數據設置。如果單純的顯示數據，則參考 {data: 'proKeyword'},
這樣數據就得以渲染。
時間比較久遠，又是晚上寫的，如果有什么不懂得可以聯系我。
這篇文章的總結：
- 講解如何使用datatables接收后台的數據
- 用戶自定義異步獲取后台數據（比如自定義搜索、條件搜索）
正在努力更新筆記，寫的有可能沒有邏輯。勿噴。