浅析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表格的使用的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!