浅析Bootstrap表格的使用

浅析Bootstrap表格的使用

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

先定义前端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 '';

}

},

{ "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 '运行';

}

else {

return '停止';

}

}

},

{

"bSortable": false, "aTargets": [5],

"render": function (data, type, full) {

return ' 编辑 删除';

}

}

],

"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)

TsgTt},

"success": function (resp) {

fnCallback(resp);

}

});

}

以上所述是给大家介绍的Bootstrap表格的使用的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。