天天看點

bootstrap bootstraptable 固定列_bootstrap table輕松實作資料表格

bootstrap bootstraptable 固定列_bootstrap table輕松實作資料表格

  在使用bootstrap table時可能在很多時候回用的表格來顯示資料,如果自己寫那肯定沒問題,但是資料展示出來就麻煩多了,然而bootstrap table 封裝了一套完善的資料表格元件,把從背景請求的資料很容易就展示出來了,bootstrap table有兩種實作方式,一種是通過table寫定在html裡面,另一種是通過js實作,js實作比較靈活,是以這裡采用js方式,下面來看實作。

bootstrap bootstraptable 固定列_bootstrap table輕松實作資料表格

推薦教程:Bootstrap圖文教程

用戶端

必須先引入相應的css、js等檔案

服務端:隻需在接到請求時傳回json數組就行了,是json數組哦,不是單個對象,不然就資料展示不出來。

注意bootstrap table 可以前端分頁也可以後端分頁,這裡我們使用的是後端分頁,後端分頁時需傳回含有

total:總記錄數 這個鍵值好像是固定的,我看文檔沒找到可以修改成别的

rows: 記錄集合 鍵值可以修改 dataField 自己定義成自己想要的就好

但是這可能會有請求時資料指派不了的情況,那時你就會幹着急了,下面還可以使用如下方式進行資料渲染。這個效果和上面一個不一樣,這裡就不上圖了。同樣第一步要引入官網所要求的的css/js等檔案。

會使用之後是不是覺得比自己寫的table更好用多了,還不用寫一大堆js和div等,還有更多功能可以去官網了解怎麼使用。