On the use _javascript skill of bootstrap form

Bootstrap-Simple, intuitive, strong, mobile device priority front-end development framework, so that web development faster and simpler. Here to introduce the use of bootstrap form, together to learn it.

Define Front table First

Then it's JS.

* * Initialization form/var otable = $ (' #expandabledatatable '). DataTable ({"Sdom": "tflt< ' Row Dtttfooter ' < ' col-sm-6 ' i>&lt ;' Col-sm-6 ' p>> ', ' aocolumndefs ': [{' bsortable ': false, ' atargets ': [0], ' render ': function (data, type, full) {Retu
RN ' <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": "description"}, {"bsortable": false, "atargets": [4], "title": "Run State", "render" : function (data, type, full) {if (full[)-Enabled "]==true" {return ' <button type= "button" class= "Btn btn-success btn-sm
"> Run </button>";}
else {return ' <button type= ' button ' class= ' btn btn-warning btn-sm ' > Stop </button> ';} }, {"bsortable": false, "atargets": [5], "Render": function (data, type, full) {return ' <a href= ' # "class=" BTN btn-in Fo 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,, "All"], "idisplaylength": 5, "searching": false, "Blengthchange": false, "language": {"sprocessing": "adding  Download data ... "," Sinfoempty ":" Record number 0 "," sinfofiltered ":" Filter from _max_ "," szerorecords ":" No content you want to search "," Search ":" "," Slengthmenu ": "_menu_", "Sinfo": "From _start_ to _end_/total _total_ data", "Opaginate": {"sprevious": "Prev", "Snext": "Next",}, "Fnserverd ATA: Function (ssource, Aodata, Fncallback) {$.ajax ({"type": ' Post ', ' url ': ssource, "DataType": "JSON", "data": {Aoda
Ta:JSON.stringify (Aodata)}, "Success": function (RESP) {fncallback (RESP);}});  }
});

The data for this table is obtained from the server side, so the following properties must be configured, otherwise the data cannot be obtained 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);
}
});

The above is a small set to introduce the bootstrap form of the use of the relevant knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!