A Brief Analysis of the Use of Bootstrap Form

Bootstrap - Simple, intuitive, robust, mobile device-first front-end development framework that makes web development faster and easier.Here's how to use the Bootstrap form. Let's learn it together.

Define Front End table First

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

Then JS

/*
*  Initialization table 
*/
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": " Task Name " },
{ "aTargets": [2], "data": "CronExpression", "title": " Expression " },
{ "aTargets": [3], "data": "Remark", "title": " Explain " },
{
"bSortable": false, "aTargets": [4], "title": " running state ",
"render": function (data, type, full) {
if (full["Enabled"]==true){
return '<button type="button" class="btn btn-success btn-sm"> Function </button>';
}
else {
return '<button type="button" class="btn btn-warning btn-sm"> Stop it </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>  edit </a> <a href="#" class="btn btn-danger btn-xs delete"><i class="fa 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": " Number of records is 0",
"sInfoFiltered": "  from  _MAX_  Strip filter ",
"sZeroRecords": " There is nothing you want to search for ",
"search": "",
"sLengthMenu": "_MENU_",
"sInfo": " from  _START_  reach  _END_ / common  _TOTAL_  Bar data ",
"oPaginate": {
"sPrevious": " upper 1 page ",
"sNext": " lower 1 page ",
}
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": 'post',
"url": sSource,
"dataType": "json",
"data": {
aoData: JSON.stringify(aoData)
},
"success": function (resp) {
fnCallback(resp);
}
});
}
}); 

The table's data is retrieved from the server side, so you must configure the following properties or you will not be able to retrieve data from the server side

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