Bootstrap-Kerangka pengembangan front-end yang sederhana, intuitif, kuat, dan mobile-first, membuat pengembangan web lebih cepat dan lebih sederhana. Mari kita perkenalkan penggunaan tabel bootstrap kepada Anda di bawah ini. Mari belajar bersama.
Tentukan tabel front-end terlebih dahulu
<Table ID = "ExpandableDataTatable"> </able>
Lalu js
/** Inisialisasi tabel*/var otable = $ ('#diperluas yang dapat diperluas'). DataTable ({"sdom": "tflt <'row dtttfooter' <'col-sm-6'i> <' col-sm-6'p >>", "aocolumndefs": [oM-function ":" bsort "," AOCOLUMPS ": [oM-6'P>", "AOCOLUMPS": [oM-6 " (data, ketik, penuh) {return '<i> </i>';}}, {"atargets": [1], "Data": "TaskName", "Title": "TaskName"}, {"ATarget": [2], "Data": "Cronexpression", "Title": "Expression,"}, "{" {"{3]," data "," {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" {"{" DATAGE " "Judul": "Deskripsi"}, {"bsortable": false, "atargets": [4], "title": "run status", "render": function (data, type, full) {if (full ["diaktifkan"] == true) {return '<tombol type = "tombol"> run </button>';} {{return 'return' <tombol = "Tombol"> run </butk- '; type = "Tombol"> Hentikan </buttomer> ';}}}, {"bsortable": false, "atargets": [5], "render": function (data, type, full) {return' <a href = "#"> <i> </i> edit </a> <a href = "#"> <i> </i> </a> </a> <a href = "> <i> <i> </i> </a> </a> <a href ="> <i> </i> </i> Hapus </a> ';}}], "BServerSide": Benar, "Sajaxsource": "/Tugas/GetAllTask", "AASORTING": [1,' ASC ']], "Allenghmenu": [5, 15, 20, -1], [5, 15, 20, "semua"], "IDS]," Idis], "Idis]," Idis], "Ids. Salah, "Bahasa": {"Sprocessing": "Memuat Data ...", "Sinfoempty": "Rekaman adalah 0", "Sinfofiltered": "Difilter dari _max_bar", "szerorecords": "tidak ada yang ingin dicari", "pencarian": "", "slenghmenu": "_u _u _menu" " /Total_TOTAL_bar data","oPaginate": {"sPrevious": "Previous": "Previous","sNext": "Next",}},"fnServerData": function (sSource, aoData, fnCallback) {$.ajax({"type": 'post',"url": sSource,"dataType": "json", "data": {aodata: json.stringify (aodata)}, "sukses": function (resp) {fncallback (resp);}});}});Data tabel ini diperoleh dari sisi server, sehingga properti berikut harus dikonfigurasi, jika tidak data tidak dapat diperoleh dari sisi server
"BServerSide": Benar, "Sajaxsource": "/Tugas/getallTask", "fnserverData": function (ssource, aodata, fncallback) {$ .Ajax ({"type": 'Post', "URL": SSOURCE, "DATATYPE": "JSON": "DATE:" DATE: "DATE:" DATE: "DATE:" DATE: "DATE:" DATE ":" Json.stringify (aodata)}, "Success": function (resp) {fncallback (resp);}});}Di atas adalah pengetahuan yang relevan tentang penggunaan formulir bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!