Tabel Bootstrap adalah plug-in tabel ringan yang menggunakan AJAX untuk mendapatkan data dalam format JSON. Pagination dan pengisian datanya sangat nyaman dan mendukung internasionalisasi. Baru-baru ini, latar belakang menggunakan plug-in ini untuk membuat aplikasi tabel untuk diringkas.
1. Cara menggunakan
Anda dapat memperoleh plug-in, lembar gaya, dan plug-in internasional melalui CDN yang disediakan oleh YouPaiyun, atau langsung mengunduhnya di situs web resmi. Masukkan plug-in JS berikut dan gaya ke header HTML dan gunakan.
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel = "stylesheet"/> <skrip src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </script> // internasionalisasi, tabel Cina <skrip src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2. Pengisian Data Tabel
Ada dua cara untuk mendapatkan data dari tabel bootstrap. Salah satunya adalah menentukan sumber data melalui properti data-URL tabel, tetapi untuk menentukan URL saat menginisialisasi tabel dengan JavaScript untuk mendapatkan data, seperti yang ditunjukkan pada contoh berikut.
<Table Data-koggle = "Table" data-url = "data.json"> <tead> ... </tead> </able> $ ('#table'). Bootstraptable ({url: 'data.json'});Metode kedua untuk menyerahkan metode pertama lebih fleksibel saat memproses data yang kompleks. Secara umum, metode kedua digunakan untuk mengisi data tabel.
var $table = $('#table');$table.bootstrapTable({url: "duoBaoActivityList", dataType: "json",pagination: true, //pagination singleSelect: false,data-locale:"zh-US", //Table Chinese search: true, //Show search box sidePagination: "server", //Server-side processing pagination columns: [{title: 'Activity Nama ', bidang:' nama ', align:' center ', valign:' middle '}, {title:' status ', align:' center ', valign:' middle ',}, {judul:' jumlah peserta ', bidang:' Judul Partisipasi ', ALIGN:' Center '}, {Judul:' Total Jumlah Partisipan ', TOTAL:' TOTAL ': TOTAL:' TOTAL ', TOTAL', TOTAL, 'TOTAL', TOTONCE: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTAL: {TOTERCE: 'StartTime', align: 'center',}, {title: 'Operation', field: 'id', align: 'center', formatter: function (value, row, index) {var e = '<a href = "#" mce_href = "#" onClick = "edit (//' + row.id + ') mCE_HREF = "#" OnClick = "Del (/''+Row.id+'/')"> Delete </a> ';Bidang bidang harus sesuai dengan bidang yang dikembalikan oleh server sebelum data akan ditampilkan.
3. Pagination dan Search
Saat paging, tabel bootstrap melewati dua bidang paging ke backend: batas dan offset. Yang pertama mewakili jumlah setiap halaman, default ke 10, dan yang terakhir mewakili offset data selama paging.
Saat mencari, bidang pencarian diteruskan ke backend, menunjukkan konten pencarian tertentu.
Data yang dikembalikan oleh sisi server juga harus mencakup dua bidang: halaman (jumlah halaman) dan total (total data), dan front-end harus paginat berdasarkan dua bidang ini.
Efek tampilan akhir ditunjukkan pada gambar di bawah ini:
Di atas adalah ringkasan dari pengisian data implementasi tabel dan aplikasi pagination di 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!