Pertama, lihat rendering implementasi. Jika Anda pikir itu tidak buruk, silakan merujuk ke kode implementasi.
Data di atas pag di bawah ini
Cara menggunakan
1 Impor Bootstrap's CSS
<tautan rel = "stylesheet" href = "css/v3/bootstrap.min.css">
2 Impor jQuery
<skrip src = "js/jQuery-1.10.1.min.js" type = "text/javascript"> </script>
3 Impor Table Paging Plugin Ltable.js
<skrip src = "js/ltable.js" type = "text/javascript"> </script>
4 Tambahkan tag HTML dan tetapkan nilai ke ID
<!-Table-> <div id = "d"> </div> <!-pagination-> <div id = "u"> </div>
5 Dapatkan data
Di sini, dapatkan data simulasi file JSON melalui Ajax
Inittable (data) adalah metode inisialisasi tabel dan paging
$ .AJAX ({url: "json/data.json", ketik: "get", datatype: "json", Success: function (data) {inittable (data);}, kesalahan: fungsi (e) {alert ("kesalahan akuisisi data");}});6 menginisialisasi tabel
Inisialisasi tabel terlebih dahulu dalam metode inisialisasi
var obj = data; var mytable = $. ltable ('#d', {data: obj.list // data json, judul: ["userid", "username", "password", "userrolename", "status", "tombol onclick = 'iD (id)'> Modifikasi </button> </tnklick/onclick = 'delel (id)'> Modifikasi </button> </tnklick onClick = 'delele (id)'> Modifikasi </butkon> </tnklick onClick = 'delele (id)'> Modifikasi </butkon> </tnklick onClick = 'delele (id)'> Modifikasi </butkhon> </Tombol OnClick = 'Delele (id) bidang, nama: ["userid", "nama pengguna", "kata sandi", "nama izin", "status", "_ opt"], tid: "userid", kotak centang: "userid"});Deskripsi kode
6.1 Metode Inisialisasi
$ .ltable ('id', {data, judul, nama, tid, chechbox});
6.2 Deskripsi Atribut
ID: Blok Isi yang dipilih oleh halaman
Data: Data JSON ditampilkan di halaman
Judul: Bidang yang sesuai dengan data untuk setiap kolom tabel
Nama: Baris pertama tabel menampilkan bidang
TID: Nilai kunci yang sesuai dari setiap baris (dapat dihilangkan)
Kotak centang: Nilai yang sesuai dengan kotak centang (dapat dihilangkan)
6.3 Deskripsi kotak centang
Aktifkan saat menambahkan atribut chechbox init
Centang nama kotak = "id"
Dapatkan metode kolom yang dipilih: $ .ltable.getCheckBoxIDS () Contoh Nilai Pengembalian "1,2,3,4"
6.4 Instruksi Operasi
Ketika nama atribut = _Opt, header tabel secara otomatis mengubah posisi "operasi"
Judul atribut yang sesuai dapat menambahkan tombol dan operasi lainnya
Contoh: "<tombol onClick = 'updf (id)'> Modifikasi </button>"
Metode klik adalah UPDF (). ID parameter adalah bidang yang sesuai dari TID atribut.
7 menginisialisasi pagination
Kemudian bagian pagination
$ .lpaging ('#u', // id yang sesuai {pagenumber: obj.pagenumber // nomor halaman saat ini, totalpage: obj.totalpage // nomor halaman total, menghitung: 5 // jumlah halaman yang ditampilkan (dapat dihilangkan), hitung: obj.count, inputsearch: true// tampilkan gabungan (inpute) oumpute: Onpute: Onpute: Onpute: Function {Funche Inpouce: Onpay (True Inponde (True Inpouce: halaman, dataurl);}});Deskripsi kode
7.1 Metode Inisialisasi
$ .lpaging ('id', {pagenumber, totalpage, countsize, count, onspageChange (num), inputSearch});
7.2 Deskripsi Metode Atribut
ID: Blok Isi yang dipilih oleh halaman
Pagenumber: Nomor halaman saat ini
TotalPage: jumlah halaman total
Hitung: Jumlah halaman yang ditampilkan (Default 5 dapat dihilangkan)
Hitungan: Jumlah total data
OnpageChange (num): Mengembalikan acara klik
InputSearch: apakah akan menampilkan kotak input kueri boolean default false
getInputVal (): Mengembalikan nomor di kotak input
8 seluruh kode
<! Doctype html> <html> <head> <meta charset = "utf-"> <meta http-equiv = "x-ua-kompatibel" konten = "IE = edge"> <itement> </title> <link rel = "stylesheet" href = "css/v/boottrap.min. id="d"></div><!-- Pagination--> <div id="u"></div></body><script src="js/jquery-...min.js" type="text/javascript"></script><script src="js/lTable.js" type="text/javascript"></script><script>var pageSize=;var myTable;var DataUrl = ""; // Inisialisasi halaman initpage (, halaman, ""); // Ajax Mendapat Fungsi Data initpage (num, ps, url) {$. ajax ({url: "json/data.json", ketik: "get", // type: "Post", // data: "userinfovo.pageid ="+num+"& userInfovo.pagecount ="+ps, datatipe: "json", Success: function (data) {inittable (data);}, error: function (e) {console.log (e) peringatan ("Kesalahan akuisisi data");}});} // inisialisasi tabel dan fungsi data paginasi yang tidak dapat diasingkan (data) {// var obj = eval ("("+data+"); obj=data;//tablemyTable=$.lTable('#d',{data:obj.list //json data, title:["userid","username","password","userrolename","status","<button onclick='updF(id)'>Modify</button><button onclick='delF(id)'>Delete</button>"] //Title corresponding Bidang, Nama: ["userid", "nama pengguna", "kata sandi", "nama izin", "status", "_ opt"], tid: "userid", kotak centang: "userid"}); // mytable.getCheckboxIds (); // Dapatkan nilai yang dipilih dengan kotak centang // halaman $ .lpaging ('#u', // ID komponen {pagenumber: obj.pagenumber // nomor halaman saat ini, TotalPage: obj.totalpage // nomor halaman, // jumlah yang ditampilkan (dapat dihilangkan), menghitung: Obj.count: inpute: inpute: Inpute (dapat dihilangkan), menghitung: OBJ.Count: input: inpute: inpute (Obj.count: Obj.Count: // Jumlah halaman (dapat dihilangkan), Count: OBJ.Count: Inputong: Input: Inpute: Obj.Count: Onpount: Input LOUDE: OBJ.COUNTAL: INPUT LUCURE (OBJ.COUNTER: INPUT LOUDE: OBJ. (num) {initpage (num, pagesize, dataUrl);}});} // Modifikasi fungsi metode updf (id) {waspada ("ubah:"+id);} // hapus fungsi metode delf (id) {ware ("hapus:"+id);} </skrip </spml>Wulin.com merekomendasikan topik terkait bootstrap:
Keterampilan operasi komponen bootstrap
Ringkasan Pengetahuan Terkait Bootstrap
Di atas adalah penjelasan terperinci dari plug-in bentuk bootstrap3 dan contoh plug-in paging yang diperkenalkan 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!