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

javascript 網頁前端 jquery

c9103205 2021-08-03 00:29:44 ? 4158 瀏覽

分享至

本人主要是 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的做法更聰明省力了。

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

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

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

緯大啊緯大人 iT邦好手 1 級 ? 2021-08-03 09:15:32 檢舉

借版詢問一下，jqgrid表格這種方式，初次會先撈取所有資料嗎???【資料量影響效能】，因datatables是先撈所有再來控制前端分頁~所以總是要先過濾不要一次撈太多~

ckp6250 iT邦好手 1 級 ? 2021-08-03 09:25:33 檢舉

>>初次會先撈取所有資料嗎?

不會，您想想看，它demo出一百萬筆，難道會一次抓一百萬筆嗎？那要跑多久啊，
它是要多少給多少，它的意思是，就算要在一百萬筆的資料量中來去自如，也沒問題，它會自己處理。

PPTaiwan iT邦好手 1 級 ? 2021-08-03 10:03:08 檢舉

@ckp6250

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

如果就以你這段想法，那一次就跟後端資料拿 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 }} |

直播中

5 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ? 2021-08-03 08:52:31

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

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

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

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

3.最好有RWD

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

4.長得好看一點(?

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

回應
分享
檢舉

登入發表回應

海綿寶寶

iT邦大神 1 級 ? 2021-08-03 10:13:34

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

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

回應 1
分享
檢舉

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

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

登入發表回應

Hankz

iT邦新手 2 級 ? 2021-08-03 11:25:23

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

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

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

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

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

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

最好有RWD

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

長得好看一點(?

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

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

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,
    } );