Vue自訂分頁 | vue連接資料庫
近期在學習並使用Vue.js,剛好有做資料分頁的需求,雖說網路上流傳著不少好用元件以及範例程式碼,但因為傻露的需求可能比較特別,老是找不到合意的,故最後就決定自己刻啦。註:傻露想要的效果類似shieldui醬子[1]使用語言、資源及相關架構Vue.js2.4.2jQuery1.9.1MVC5(VS2013)C#Json.net(不知道第幾版但版號應該沒差)bootstrap3.3.7awesomefont4.7以下是正文XD設有一群的資料要依分頁顯示,並依照按下分頁時才至資料庫取得該分頁的資料集合。假設頁碼範圍1-4頁,分頁長像如下:[|<][<][1][2][3][4][…][>][>|]以下就上面...
近期在學習並使用Vue.js,剛好有做資料分頁的需求,雖說網路上流傳著不少好用元件以及範例程式碼,但因為傻露的需求可能比較特別,老是找不到合意的,故最後就決定自己刻啦。
註:傻露想要的效果類似shield ui醬子[1]
使用語言、資源及相關架構Vue.js 2.4.2jQuery 1.9.1MVC 5(VS2013)C#Json.net(不知道第幾版但版號應該沒差)bootstrap 3.3.7awesome font 4.7
以下是正文XD設有一群的資料要依分頁顯示,並依照按下分頁時才至資料庫取得該分頁的資料集合。假設頁碼範圍1-4頁,分頁長像如下:[|<][<][1][2][3][4][…][>][>|]
以下就上面所示撰寫範例。
後端1.web.config初始化設定在web.config內設定初始顯示的頁碼、每頁顯示的資料量、以及畫面上要顯示的頁碼範圍(即本例的4頁)
<configuration> <appSettings> <!--取得資料的起始頁數--> <add key="INIPAGE" value="1"/> <!--每頁顯示資料筆數--> <add key="CNT_PAGEITEM" value="7"/> <!--page顯示頁碼集合數--> <add key="CNT_PAGEITEM_MAX" value="4"/> </appSettings> </configuration>2.資料這邊為了方便起見,不連接資料庫使用資料來源: https://www.json-generator.com/api/json/get/cknklDscqG?indent=2[2]以下程式碼因篇幅關係故僅顯示部分資料
public class SimpleData { public string GetSimpleData() { return data; } ...