Bootstrap與KnockoutJs相結合實現分頁效果實例詳解_javascript技巧

來源：懂視網責編：小采時間：2020-11-27 21:49:53

Bootstrap與KnockoutJs相結合實現分頁效果實例詳解_javascript技巧

Bootstrap與KnockoutJs相結合實現分頁效果實例詳解_javascript技巧:KnockoutJS是一個JavaScript實現的MVVM框架。非常棒。比如列表數據項增減后，不需要重新刷新整個控件片段或自己寫JS增刪節點，只要預先定義模板和符合其語法定義的屬性即可。簡單的說，我們只需要關注數據的存取。一、引言由于最近公司的系統需要改版，改

推薦度：

點擊下載本文 文檔為doc格式

導讀Bootstrap與KnockoutJs相結合實現分頁效果實例詳解_javascript技巧:KnockoutJS是一個JavaScript實現的MVVM框架。非常棒。比如列表數據項增減后，不需要重新刷新整個控件片段或自己寫JS增刪節點，只要預先定義模板和符合其語法定義的屬性即可。簡單的說，我們只需要關注數據的存取。一、引言由于最近公司的系統需要改版，改

KnockoutJS是一個JavaScript實現的MVVM框架。非常棒。比如列表數據項增減后，不需要重新刷新整個控件片段或自己寫JS增刪節點，只要預先定義模板和符合其語法定義的屬性即可。簡單的說，我們只需要關注數據的存取。

一、引言

　　由于最近公司的系統需要改版，改版的新系統我打算使用KnockoutJs來制作Web前端。在做的過程中，遇到一個問題——如何使用KnockoutJs來完成分頁的功能。在前一篇文章中并沒有介紹使用KnockoutJs來實現分頁，所以在這篇文章中，將補充用KnockoutJs+Bootstrap來實現數據的分頁顯示。

二、使用KnockoutJs實現分頁

　　這里采用了兩種方式來實現分頁，第一種是將所有數據加載出來，然后再將所有數據分頁顯示；第二種是每次都只加載部分數據，每次請求都重新加載后面的數據。

　　對于這兩種方式，使用Razor方式實現的分頁一般都會采用第二種方式來實現分頁，但是對于單頁面程序來說，第一種實現方式也有其好處，對于不是非常大量的數據完全可以采用第一種實現方式，因為這樣的話，后面的數據的加載，用戶體驗非常的流暢。所以這里將分別介紹這兩種實現方式。

2.1 每次加載部分數據的實現

　　這里的后端代碼采用的是前一篇文章的代碼，只是多加了一些示例數據而已。具體的后端實現代碼為：

輸出代碼執行各個環節的執行時間", Owner = "Tonny Li", FinishTime = DateTime.Parse(DateTime.Now.AddDays(4).ToString(CultureInfo.InvariantCulture)) }, new Task { Id =5, Name = "測試任務1", Description = "測試任務1", Owner = "李志", FinishTime = DateTime.Parse(DateTime.Now.AddDays(5).ToString(CultureInfo.InvariantCulture)) }, new Task { Id =6, Name = "測試任務2", Description = "測試任務2", Owner = "李志", FinishTime = DateTime.Parse(DateTime.Now.AddDays(6).ToString(CultureInfo.InvariantCulture)) }, new Task { Id =7, Name = "測試任務3", Description = "測試任務3", Owner = "李志", FinishTime = DateTime.Parse(DateTime.Now.AddDays(7).ToString(CultureInfo.InvariantCulture)) }, }; #endregion #region Public Methods public IEnumerable GetAll() { return _tasks; } public IEnumerable GetAll(int pageNumber, int pageSize, out int totalCount) { var skip = (pageNumber - 1) * pageSize; var take = pageSize; totalCount = _tasks.Count; return _tasks.Skip(skip).Take(take); } public Task Get(int id) { return _tasks.Find(p => p.Id == id); } public Task Add(Task item) { if (item == null) { throw new ArgumentNullException("item"); } item.Id = _tasks.Count + 1; _tasks.Add(item); return item; } public void Remove(int id) { _tasks.RemoveAll(p => p.Id == id); } public bool Update(Task item) { if (item == null) { throw new ArgumentNullException("item"); } var taskItem = Get(item.Id); if (taskItem == null) { return false; } _tasks.Remove(taskItem); _tasks.Add(item); return true; } #endregion }

　　Web前端的實現代碼：

　　對應的Js實現為：

　　這里介紹了下使用KnockoutJs實現分頁功能的實現思路：

1.頁面加載完成之后，發起Ajax請求去異步調用REST 服務來請求部分數據。

2.然后將請求的數據通過KnockoutJs綁定顯示。

3.將對應的分頁信息綁定到Bootstrap分頁中

4.當用戶點擊翻頁時，再發起一個Ajax請求去異步調用Rest服務請求數據，再將請求的數據顯示出來。

　　這上面是描述的代碼的調用邏輯關系，你可以參考對應的JS代碼來理解上面的描述。到此我們第二種實現方式就實現完成了。

2.2 第一次加載所有數據，然后將所有數據分頁顯示

　　接下來就介紹了第一種實現方式，這樣的實現方式，用戶只會在第一次的時候才會感覺到數據加載中，翻頁過程中感覺不到頁面的加載，這樣對于一些本身數據了不是太多的情況下，對于用戶的感覺也是更加流暢的。

　　其具體的實現思路，也就是將請求的數據不要全部顯示在頁面上，因為數據太多，一下子顯示到頁面中，用戶可能會眼花繚亂。將數據分頁顯示將使得用戶查看更加清晰。

具體的Web前端Js的實現代碼為：