Analysis of the use of Bootstrap tables, analysis of bootstrap tables

Analysis of the use of Bootstrap tables, analysis of bootstrap tables

Bootstrap-simple, intuitive, powerful, and mobile device-preferred front-end development framework, making web development faster and simpler. The following describes how to use the Bootstrap table.

First define the front-end table

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

Then Javascript

/** Initialize table */var oTable = $ ('# expandableable able '). 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-plus-square-o row-details"> </I>' ;},{ "aTargets": [1], "data": "TaskName", "title": "Task Name" },{ "aTargets": [2], "data": "CronExpression", "title ": "expression" },{ "aTargets": [3], "data": "Remark", "title": "Description" },{ "bSortable": false, "aTargets": [4], "title": "Running State", "render": function (data, type, full) {if (full ["Enabled"] = true) {return '<button type = "button" class = "btn-success btn-sm"> RUN </button> ';} else {return '<button type = "button" class = "btn-warning btn-sm"> stop </button>' ;}}, {"bSortable ": false, "aTargets": [5], "render": function (data, type, full) {return '<a href = "#" class = "btn-info btn-xs edit"> <I class = "fa-edit"> </I> edit </a> <a href = "#" class = "btn-danger btn-xs delete"> <I class = "fa-trash-o"> </I> delete </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": "loading data... "," sInfoEmpty ":" The number of records is 0 "," sInfoFiltered ":" filter entries from _ MAX _ "," sZeroRecords ":" No content you want to search ", "search": "", "sLengthMenu": "_ MENU _", "sInfo": "data entries from _ START _ to _ END _/TOTAL ", "oPaginate": {"sPrevious": "Previous Page", "sNext": "Next page", }}, "fnServerData": function (sSource, aoData, fnCallback) {$. ajax ({"type": 'post', "url": sSource, "dataType": "json", "data": {aoData: JSON. stringify (aoData)}, "success": function (resp) {fnCallback (resp );}});}});

The data in this table is obtained from the server. Therefore, the following attributes must be configured. Otherwise, data cannot be obtained from the server.

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

The above is a small Editor to introduce you to the use of Bootstrap tables, I hope to help you, if you have any questions, please leave a message, the small editor will reply to you in a timely manner. Thank you very much for your support for the help House website!