Proyek ASP.NETMVC terbaru membutuhkan klasifikasi daftar data. Ini awalnya backend yang dikembangkan berdasarkan bootstrap, jadi saya bertanya-tanya apakah Bootstrap memiliki plug-in paging, atau fungsi paging yang didukung oleh jQuery, sehingga keseluruhan gaya backend situs web dapat disatukan tanpa harus menulis serangkaian fungsi paging sendiri.
Hal pertama adalah mengunduh bootstrap paginator. Download Address: Bootstrap Paginator Paginator Plugin
Pertama -tama, file JS dan CSS harus diperkenalkan di atas tampilan. Ada tiga file utama, yaitu file JS CSS, JQuery dan Paginator. Saya mencari secara online dan tampaknya jQuery harus versi 1.8 atau lebih, saya tidak pernah menguji ini secara langsung. Jadi referensi file tampilan adalah:
<tautan href = "css/bootstrap.css" rel = "stylesheet"> <script type = "text/javascript" src = "js/jQuery-1..8.1.js"> </script> <script type = "text/javascript" src = "js/bootstrap-paginor.scripts"> script> script> script> script> script> script/script> script/script/javascript "> script/script/javascript"> script/javascript "> script/javascript/script/script/javascript">
Kemudian, fungsi pagination tentu saja merupakan penyegaran lokal berdasarkan Ajax untuk menarik kami, dan tentu saja ini membutuhkan dukungan dari jQuery. Saya dulu melakukan paging easyui, dan kali ini harus sedikit berbeda.
<script> $ (function () {var carid = 1; $ .AJax ({url: "/oa/pengaturan/getDate", DataType: 'json', type: "Post", data: "id =" + carid, Success: function (data) {if (data! = null) {$ .Each (eval eval ("" + DATA (" + DATA) {if! = NULL) {$. $ (" $ (#Daftar "). Append ('<Table ID =" Data_table ">'); $ ("#Daftar "). $ (#Daftar "). $ (#Daftar "). Append ('<TBody>'); $ ("Daftar"). Append ('<TD> Keterangan </td>'); $ ("#Daftar"). Append ('<td>'); ); "> Hapus </button> '); $ ("#list "). Append (' </td> '); $ ("#list "). Append (' </tr> '); $ ("#list "). Append (' </tbody '); $ ("#list "). Append (' <'<tr>); $ ("); $ (#Daftar "). tipe) var currentpage = eval ("(" + data + ")). CurrentPage; // Dapatkan UrrentPage Var Options = {Bootstrapmajorversion: 2, // Versi CurrentPage: CurrentPage, // Halaman saat ini:" TOPLE "(TOPE:" KASUS "(TOPE" (Tipe) (Tipe) (Tipe) (Tipe) (Tipe) (Tipe) (Tipe) (Tipe) (Tipe) (Tipe) (Tipe) (Tipe (Tipe, " "Halaman sebelumnya"; "Page =" + Page, Success: Function (data1) {if (data1! = null) {$ .each (eval ("(" + data + ")"). Daftar, fungsi (indeks, item) {// transtraight JSON $ ("#Daftar"). $ ("#Daftar"). Tambahkan ('<th> id </t>'); $ (#Daftar "). $ ("#Daftar"). Append ('<td>' + item.name + '</td>'); $ ("#Daftar"). Append ('<tombol OnClick = "Edit (' + item.id + ');"> Modifikasi </button>'); $ (#Daftar "). Append ('</tr>'); $ (#Daftar ")Di bagian utama tampilan, ada dua div, satu untuk menyajikan daftar data dan yang lainnya untuk menempatkan navigasi halaman seleksi.
<div> <label> Daftar departemen </LABEL> <HR/> <DIV ID = "LIST"> </SIV> <DIV ID = "Contoh"> </div> </div>
Metode getDate di latar belakang seperti ini:
ActionResult GetDate (int id, int? Page) {int pageIndex = halaman ?? 1; // Halaman saat ini konstanta halaman = 2; // Ini digunakan untuk mengatur jumlah data yang akan ditampilkan pada setiap halaman. Disarankan untuk menulis ini ke web.config untuk kontrol global // Dapatkan data departemen untuk ditampilkan ienumerable <model.qgoA_department> list = operateContext.current.bllSession.iqgoA_departmentBll.getpagedList (pageIndex, fageSize, x.ider! // Dapatkan jumlah data int rowcount = list.count (); // Melalui perhitungan, perlu membagi halaman menjadi beberapa halaman. Data yang kurang dari satu halaman dihitung sesuai dengan satu halaman jika (RowCount%Pagesze! = 0) {rowCount = rowCount / PageSize + 1; } else {rowcount = rowcount / pagesize; } // Konversi ke format json var strresult = "{/" pagecount/":"+rowcount+",/" currentpage/":"+pageIndex+",/" list/":"+jsonConvert.serializeObject (daftar)+"}"; return json (Strresult, jsonrequestbehavior.allowget); }Metode ini masih sedikit cacat dan dapat ditulis lebih sempurna, seperti halnya halaman di atas dapat dimodifikasi secara global dengan membaca file konfigurasi Web.config, yang lebih mudah dikelola. Selain itu, untuk informasi seperti atribut halaman: nomor halaman, halaman saat ini, kuantitas data, dll., Anda dapat membuat kelas untuk menyimpan informasi. Jika proyek situs web lebih besar, akan lebih nyaman bagi kami untuk mengubah kode kami sendiri.
Efek tampilan akhir adalah sebagai berikut:
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah penggunaan plug-in paginator paginator bootstrap yang saya bagikan dengan Anda. Saya harap akan sangat membantu bagi Anda untuk menguasai penggunaan plug-in paginator paginator bootstrap.