iT邦幫忙

1

請推薦好用的前端表格套件

  • 分享至 

  • xImage

本人主要是 java 工程師
請教各位前端大神,可否有推薦的前端畫表格套件
不依賴框架
不用自己寫太多代碼

有幾個需求
1.希望能簡單的實現後端分頁功能
(比如按下後十頁,可以去後端資料庫撈第500~1000筆資料)
2.希望泛用性高,現在市面上比較多人在用
3.最好有RWD
4.長得好看一點(?

本人現在是用 jquery 的 datatable
但是他這個要實現後端分頁功能
還得自己寫一堆code來算分頁,蠻麻煩的
不然就只能一次全部撈出來,怕資料量一大跑的久

還請各位大神推薦

補充說明:

不好意思表達不清楚
我是希望下方欄長這樣 << , <, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, > , >>
然後按下 ">>" 可以直接送到參數後端拉 11~20 頁的資料( 我預想的是後端收參後處理)
拉出來後,前端套件再自行分頁 "會自動顯示 11,12...20 ",而不是重新跑"1,2,3...."

看更多先前的討論...收起先前的討論...
ckp6250 iT邦好手 1 級 ‧ 2021-08-03 06:06:30 檢舉
花點錢,jqgrid 首選。
不怕資料量大,一百萬筆也沒問題。
http://www.guriddo.net/demo/guriddojs/loading_data/rest_million/index.html

又,什麼叫做【後端分頁】?
gamegear iT邦新手 5 級 ‧ 2021-08-03 08:15:57 檢舉
我認知的後端分頁,是指前面的網頁跟後端程式說:我要第幾頁的資料,一頁有幾筆,後端程式用算的方式(不管是DB還是程式自己跑),只抛出那一頁的資料給前端。
前後端溝通的方式,可以用Post,也可以用Get,回傳資料的方式,可以用JSON,也可以用XML,反正就是前端可以順利解析的資料集就可以。

這樣做可以節省伺服器到用戶端的傳輸流量,比起1次傳100萬筆回去,節省太多了。

有錯煩請鞭小力一點
froce iT邦大師 1 級 ‧ 2021-08-03 08:18:30 檢舉
就類似 lazyload,送出你要取的筆數和從哪開始,後端就吐多少筆回去給前端顯示用。

不過其實datatable我覺得都能簡單的做到啊...也沒啥太多code好寫。
ckp6250 iT邦好手 1 級 ‧ 2021-08-03 08:42:19 檢舉
若按照樓上二位的說法,那我認為jqgrid的做法更聰明省力了。

假設使用者第一次要第看10頁,第二次要看第30頁,那麼,前端程式就要跟後端程式下二次指令,分別取回這二頁的資料,這部份沒問題。

但,假如,使用者第三次想回頭看看第10頁呢?(可能是剛看過忘了),那麼,前端程式還要不要再向後端程式再下一次指令呢?如果要的話,那麼,就是前後端得溝通三次了。

jqgrid 的做法是,已經要過的不必再要一次,直接端出來。我們設計師不用去管這個,它自己決定要不要向後端索取資料。
借版詢問一下,jqgrid表格這種方式,初次會先撈取所有資料嗎???【資料量影響效能】,因datatables是先撈所有再來控制前端分頁~所以總是要先過濾不要一次撈太多~
ckp6250 iT邦好手 1 級 ‧ 2021-08-03 09:25:33 檢舉
>>初次會先撈取所有資料嗎?

不會,您想想看,它demo出一百萬筆,難道會一次抓一百萬筆嗎?那要跑多久啊,
它是要多少給多少,它的意思是,就算要在一百萬筆的資料量中來去自如,也沒問題,它會自己處理。
PPTaiwan iT邦好手 1 級 ‧ 2021-08-03 10:03:08 檢舉
@ckp6250

>>但,假如,使用者第三次想回頭看看第10頁呢?(可能是剛看過忘了),那麼,前端程式還要不要再向後端程式再下一次指令呢?如果要的話,那麼,就是前後端得溝通三次了。

如果就以你這段想法,那一次就跟後端資料拿 50 筆給 jqgrid 去做分頁也可以啊?? 分頁的多少取決於你要一次給多少??

>>jqgrid 的做法是,已經要過的不必再要一次,直接端出來。我們設計師不用去管這個,它自己決定要不要向後端索取資料。

從後端要 "多少資料" 都取決於你要多少筆,你要 10,20,30 筆都可以,100 萬筆也可以,但 User 有必要拿到這麼多資料嗎??

後端程式要做的只是 "減少大量資料被無限制的存取" ,以減少網路頻寬與 Server 無限制被浪費掉。而且 User 為何要這麼多筆資料呢?? 有良好管理的公司,當 User 存取大量的資料其本上都會被調查。

再說了,資料有 10 萬筆,一次就給 10 萬筆在前端查詢嗎?? 那就只會有一個人拿 10 萬筆資料丟到前端嗎?? 系統不會只給一個人操作的吧!!
c9103205 iT邦新手 5 級 ‧ 2021-08-03 10:27:44 檢舉
我是原po
不好意思表達不清楚
我是希望下方欄長這樣 << , <, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, > , >>
然後按下 ">>" 可以直接送指令到後端拉 11~20 頁的資料
拉出來後,前端套件再自行分頁
ckp6250 iT邦好手 1 級 ‧ 2021-08-03 14:36:55 檢舉
@PPTaiwan
@c9103205

若有空的話,把它的demo一個一個仔細看一遍吧,它做的可能不止您的想像。
https://guriddo.net/?page_id=119

功能強大的免費Table套件不少,它要賣錢,自然有它賣錢的道理。
淺水員 iT邦大師 6 級 ‧ 2021-08-03 14:58:15 檢舉
我有點不懂為什麼不要照預定的方式一次抓一頁的內容
一次抓一頁跟一次抓十頁,程式碼應該差不多(同樣都要後端回傳指定的資料範圍)

另外一次抓大範圍資料,只在前端透過 js 切換
即時性會比一次抓一頁差吧
c9103205 iT邦新手 5 級 ‧ 2021-08-03 21:31:57 檢舉
主要是一頁估計只放20筆資料
10頁也才200筆
不一頁一頁抓是希望降低資料庫 io
Ruei iT邦研究生 1 級 ‧ 2021-08-07 18:02:01 檢舉
我這邊習慣是使用 EasyUI ,這個主要是用 jQuery 達成的,他下面有個 datagrid 可以直接把資料丟進去,分頁上也蠻好做的,有分前端方式和後端方式,前端可能就你一口氣丟 100 Rows 然後每一頁 10 Rows,後端方式就是每次按下一頁就 ajax 回去要
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
3

1.希望能簡單的實現後端分頁功能
(比如按下後十頁,可以去後端資料庫撈第500~1000筆資料)

這是後端的事,不是前端處理的。正確來說,前端大多只是送進第幾頁而已。

2.希望泛用性高,現在市面上比較多人在用

這我不清楚,目前比較常看到的是jqgrid 。這算是很老的一種資料插件。算是比較多人用的吧。

3.最好有RWD

一般大多數來說,這是靠前端的功力。及客戶的需求。

4.長得好看一點(?

同第3點,一般這一類的東西還是得看前端的功力處理。

1
海綿寶寶
iT邦大神 1 級 ‧ 2021-08-03 10:13:34

看到 jqGrid 這麼流行
以下 Google 一些提供參考

如果有滿意的
記得回來分享
3個
6個
13個

ckp6250 iT邦好手 1 級 ‧ 2021-08-03 14:33:14 檢舉

免費的很多,功能也很強大,
它能賣錢也並非浪得虛名。

0
Hankz
iT邦新手 2 級 ‧ 2021-08-03 11:25:23

依照這些需求推薦使用DataTables這個套件
功能強大,幾乎要甚麼有甚麼,很多時候不是他沒有,而是你不知道他有
進階功能可以透過引入其他擴展檔案來達到
不會有那種,我只需要簡單的功能,結果卻需要引用超大的檔案才能夠使用的狀況

算是上手容易,完全精通很難(因為功能真的太多)的套件吧

希望能簡單的實現後端分頁功能

可以透過ajax傳送頁數、單頁資料筆數、排序依據欄位...等等
再讓後端回傳相對應的資料,就可以達到後端分頁、排序等等功能

希望泛用性高,現在市面上比較多人在用

有多少人用不知道,但是簡單的運用網路上教學滿多的,官方的文件也寫很清楚,甚至還有線上範例可以看

最好有RWD

有,預設就能自動調整欄位寬度
如果引入擴展功能,還能夠在寬度不足時藏起欄位(可以設定隱藏優先度),按下開闔按鈕開啟隱藏欄位(Responsive integration)

長得好看一點(?

有不同的外觀可以做選擇
我大多都是用bootstrap的外觀,跟我們在做的網站風格比較融入

看更多先前的回應...收起先前的回應...
Hankz iT邦新手 2 級 ‧ 2021-08-03 11:36:51 檢舉

抱歉我沒注意到原po就是用DataTables...
但是DataTables的後端分頁功能的部分應該就只需要最低限度的code才對
search、order、columns、start、length這幾個參數有處理就好
甚至不想處理的話,在前端關掉那個功能,然後後端不實做那個功能就行

而且需要後端分頁...那不管甚麼套件都要在後端實現一樣的程式碼,就只是輸出輸入的格式不同而已

c9103205 iT邦新手 5 級 ‧ 2021-08-03 14:02:36 檢舉

謝謝回復!
主要是不確定他能不能處理正確分頁頁數問題
不希望套了套件以後還要額外寫一大坨 js 在處理...

froce iT邦大師 1 級 ‧ 2021-08-03 14:44:13 檢舉

https://datatables.net/examples/server_side/index.html
https://datatables.net/examples/ajax/index.html

這兩邊例子看完應該就會寫了...
JS部分應該是只會送頁數等一些資訊

Hankz iT邦新手 2 級 ‧ 2021-08-03 15:26:13 檢舉

其實真的不難
js只要調整設定即可
DataTables會幫你處理

    $('#example').DataTable( {
        "ajax": "get_data.php",
        "processing": true,
        "serverSide": true,
        "columns": columns,
    } );
c9103205 iT邦新手 5 級 ‧ 2021-08-04 09:52:58 檢舉

感謝各位大神

0
idoncys
iT邦研究生 2 級 ‧ 2021-08-09 12:57:21

我們前端畫表格工具都自己寫,排個grid一覽表很快,最近在排 table 管理,要跟我們客戶直接線上討論,將繼續增加編修功能

https://www.idon.com.tw/index2.html?jobno=21080001

0
tenno081
iT邦研究生 4 級 ‧ 2021-08-09 20:04:18

我是.net mvc的

之前也有寫過datatable用後端分頁

我是參考這網址,也許對你有幫助

http://demo.dotnetawesome.com/jquery-datatable-server-side-pagination-sorting

我要發表回答

立即登入回答