2021-7-7 前端達(dá)人
用漂亮的前端表格直觀顯示數(shù)據(jù)
表格顯示
設(shè)置一個table
-
<table id="table_id" class="display">
-
<thead>
-
<tr>
-
<th>Column 1</th>
-
<th>Column 2</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<td>Row 1 Data 1</td>
-
<td>Row 1 Data 2</td>
-
</tr>
-
<tr>
-
<td>Row 2 Data 1</td>
-
<td>Row 2 Data 2</td>
-
</tr>
-
</tbody>
-
</table>
這個是JqueryTable必要的靜態(tài)資源
-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
-
-
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
如果你使用了js， 那么還需要引入jquery.js
-
$(document).ready( function () {
-
$('#table_id').DataTable();
-
} );
-
<table id="tbl_grantedCoach" class="table table-striped table-bordered nowrap" style="table-layout:fixed; text-align: center;">
-
<thead>
-
<tr>
-
<th width="10%">用戶名</th>
-
<th width="10%">姓名</th>
-
<th width="8%">性別</th>
-
<th width="10%">手機(jī)號</th>
-
<th width="5%">工作年限</th>
-
<th width="12%">教員類型</th>
-
<th width="15%">角色</th>
-
<th width="10%">備注</th>
-
<th width="12%">操作</th>
-
</tr>
-
</thead>
-
</table>
ajax 發(fā)送請求， 接受表格數(shù)據(jù)，再填寫進(jìn)去
-
initGrantedCoachGrid:function(){
-
selectedUserId =[];
-
if(grantedCoachGrid){
-
grantedCoachGrid.ajax.url(
-
"course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "").load();
-
} else {
-
grantedCoachGrid = $('#tbl_grantedCoach')
-
.DataTable(
-
{
-
"lengthMenu" : [ [ 10, 20, 30 ],
-
[ 10, 20, 30 ] // change per page
-
// values here
-
],
-
"ordering":false,
-
"retrieve":true ,
-
"bDestory" :true,
-
"pageLength": 10,
-
"bAutoWidth" : false,
-
"ajax" : {
-
"url" : "course/getGrantedCoachByFolder?json&folderId="
-
+ selectNodeId + "",
-
"type" : "get",
-
"cache" : false,
-
"contentType" : "application/json; charset=utf-8",
-
"dataSrc" : ""
-
},
-
"rowCallback" : function(row, data) {
-
selectedUserId.push(data.userId);
-
},
-
-
"aoColumnDefs" : [ {
-
sDefaultContent : '',
-
aTargets : [ '_all' ]
-
} ],
-
// 填入列數(shù)據(jù)
-
"columns" : [
-
-
{
-
"data" : "loginName"
-
},
-
{
-
"data" : "userFullName"
-
},
-
-
{
-
"data" : "gender",
-
"mRender" : function(data,
-
type, full) {
-
if (data == "M") {
-
return "男";
-
} else if (data == "F") {
-
return "女";
-
}
-
}
-
},
-
{
-
"data" : "mobilePhone"
-
},
-
{
-
"data" : "workYear"
-
},
-
{ "data": "coachType" , "mRender":function(data,type,full){
-
if(data=="0")
-
{
-
data="理論培訓(xùn)";
-
}else if(data=="1"){
-
data="實習(xí)培訓(xùn)";
-
}else{
-
data="理論培訓(xùn)+實習(xí)培訓(xùn)";
-
}
-
return data;
-
}},
-
-
{
-
"data" :function( row, type, val, meta ){
-
-
return row.userRoles[0].roleName;
-
-
}
-
},
-
{
-
"data" : "remark"
-
},
-
{
-
"data" : null,
-
"mRender" : function(data,
-
type, full) {
-
return "";
-
}
-
}
-
-
],
-
"oLanguage" : {
-
"sProcessing" : "正在加載中......",
-
"sLengthMenu" : "每頁顯示_MENU_條記錄",
-
"sZeroRecords" : "對不起，查詢不到相關(guān)數(shù)據(jù)！",
-
"sEmptyTable" : "無數(shù)據(jù)存在！",
-
"sInfo" : "當(dāng)前顯示_START_到_END_條，共_TOTAL_條記錄",
-
"sInfoFiltered" : "數(shù)據(jù)表中共為 _MAX_ 條記錄",
-
"sSearch" : "",
-
"oPaginate" : {
-
"sFirst" : "首頁",
-
"sPrevious" : "上一頁",
-
"sNext" : "下一頁",
-
"sLast" : "末頁"
-
}
-
}, // 多語言配置
-
"stateSave" : true
-
// save the state of a table
-
});
-
}
-
-
}
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://bouu.cn