Bootstrap-Ein einfacher, intuitiver, leistungsstarker, mobiler Front-End-Entwicklungsrahmen, der die Webentwicklung schneller und einfacher macht. Lassen Sie uns Ihnen unten die Verwendung von Bootstabellen vorstellen. Lass uns zusammen lernen.
Definieren Sie zuerst den Front-End-Tisch
<table id = "exptabledatatable"> </table>
Dann JS
/** Initialisieren Sie die Tabelle*/var otable = $ ('#EXPDABLEDATEDATABLE'). DataTable ({"sdom": "Tflt <'row dtttfooter' <' type, full) {return '<i></i>';}},{ "aTargets": [1], "data": "TaskName", "title": "TaskName" },{ "aTargets": [2], "data": "CronExpression", "title": "Expression" },{ "aTargets": [3], "data": "Remark", "title": "Beschreibung"}, {"BSORTABLE": Falsch, "Atargets": [4], "Titel": "Status run status", "render": function (data, type, full) {if (full ["enabled"] == true) {return '<button type type = "button"> stop </button> ';}}}, {"bsortable": false, "atargets": [5], "render": function (data, type, voll) {return' <a href = "#"> <i> Löschen </a> ';}}], "bserverside": wahr, "sajaxSource": "/task/getAlltask", "aasorting": [[1,' asc '], "Alengthmenu": [5, 15, 20, -1], [5, 15, 20, 20, "],"]. false,"language": {"sProcessing": "Loading data...","sInfoEmpty": "Records are 0","sInfoFiltered": "Filtered from _MAX_bar","sZeroRecords": "Nothing you want to search","search": "","sLengthMenu": "_MENU_","sInfo": "From _START_ to _End_ /total_total_bar data "," opaginate ": {" sprevious ":" vorher ":" vorher "," snext ":" next ",}}," fnServerdata ": Funktion (ssource, aodata, fncallback) {$. "json", "data": {aodata: json.stringify (aodata)}, "Erfolg": Funktion (resp) {fncallback (resp);}});}});Die Daten dieser Tabelle werden von der Serverseite erhalten, sodass die folgenden Eigenschaften konfiguriert werden müssen. Andernfalls können die Daten nicht von der Serverseite erhalten werden
"bServerSide": true,"sAjaxSource": "/Task/GetAllTask","fnServerData": function (sSource, aoData, fnCallback) {$.ajax({"type": 'post',"url": sSource,"dataType": "json","data": {aoData: Json.Stringify (aodata)}, "Erfolg": Funktion (resp) {fncallback (resp);}});};Das obige ist das relevante Wissen über die Verwendung von Bootstrap -Formularen, die Ihnen vom Herausgeber vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!