浅析Bootstrap表格的使用

前端技术 2023/09/05 JavaScript

Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。下面给大家介绍Bootstrap表格的使用，一起学习吧。

先定义前端table

<table class=\"table table-striped table-bordered table-hover\" id=\"expandabledatatable\"></table>

然后是JS

/*
* 初始化表格
*/
var oTable = $(\'#expandabledatatable\').dataTable({
\"sDom\": \"Tflt<\'row DTTTFooter\'<\'col-sm-6\'i><\'col-sm-6\'p>>\",
\"aoColumnDefs\": [
{
\"bSortable\": false, \"aTargets\": [0],
\"render\": function (data, type, full) {
return \'<i class=\"fa fa-plus-square-o row-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 \'<button type=\"button\" class=\"btn btn-success btn-sm\">运行</button>\';
}
else {
return \'<button type=\"button\" class=\"btn btn-warning btn-sm\">停止</button>\';
}
}
},
{
\"bSortable\": false, \"aTargets\": [5],
\"render\": function (data, type, full) {
return \'<a href=\"#\" class=\"btn btn-info btn-xs edit\"><i class=\"fa fa-edit\"></i> 编辑</a> <a href=\"#\" class=\"btn btn-danger btn-xs delete\"><i class=\"fa fa-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表格的使用的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/14143

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案