浅析Bootstrap表格的使用
Bootstrap-简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。下面给大家介绍Bootstrap表格的使用，一起学习吧。
先定义前端table
<tableclass="tabletable-stripedtable-borderedtable-hover"id="expandabledatatable"></table>
然后是JS
/*
*初始化表格
*/
varoTable=$('#expandabledatatable').dataTable({
"sDom":"Tflt<'rowDTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
"aoColumnDefs":[
{
"bSortable":false,"aTargets":[0],
"render":function(data,type,full){
return'<iclass="fafa-plus-square-orow-details"></i>';
}
},
{"aTargets":[1],"data":"TaskName","title":"任务名称"},
{"aTargets":[2],"data":"CronExpression","title":"表达式"},
{"aTargets":[3],"data":"Remark","title":"说明"},
{
"bSortable":false,"aTargets":[4],"title":"运行状态",
"render":function(data,type,full){
if(full["Enabled"]==true){
return'<buttontype="button"class="btnbtn-successbtn-sm">运行</button>';
}
else{
return'<buttontype="button"class="btnbtn-warningbtn-sm">停止</button>';
}
}
},
{
"bSortable":false,"aTargets":[5],
"render":function(data,type,full){
return'<ahref="#"class="btnbtn-infobtn-xsedit"><iclass="fafa-edit"></i>编辑</a><ahref="#"class="btnbtn-dangerbtn-xsdelete"><iclass="fafa-trash-o"></i>删除</a>';
}
}
],
"bServerSide":true,
"sAjaxSource":"/Task/GetAllTask",
"aaSorting":[[1,'asc']],
"aLengthMenu":[
[5,15,20,-1],
[5,15,20,"All"]
],
"iDisplayLength":5,
"searching":false,
"bLengthChange":false,
"language":{
"sProcessing":"正在加载数据...",
"sInfoEmpty":"记录数为0",
"sInfoFiltered":"从_MAX_条过滤",
"sZeroRecords":"没有您要搜索的内容",
"search":"",
"sLengthMenu":"_MENU_",
"sInfo":"从_START_到_END_/共_TOTAL_条数据",
"oPaginate":{
"sPrevious":"上一页",
"sNext":"下一页",
}
},
"fnServerData":function(sSource,aoData,fnCallback){
$.ajax({
"type":'post',
"url":sSource,
"dataType":"json",
"data":{
aoData:JSON.stringify(aoData)
},
"success":function(resp){
fnCallback(resp);
}
});
}
});
该表格的数据是从服务器端取得，所以必须配置下面这些属性，否则无法从服务器端获得数据
"bServerSide":true,
"sAjaxSource":"/Task/GetAllTask",
"fnServerData":function(sSource,aoData,fnCallback){
$.ajax({
"type":'post',
"url":sSource,
"dataType":"json",
"data":{
aoData:JSON.stringify(aoData)
},
"success":function(resp){
fnCallback(resp);
}
});
}
以上所述是小编给大家介绍的Bootstrap表格的使用的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！