Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解_javascript技巧
來源：懂視網(wǎng)
責(zé)編：小采
時(shí)間：2020-11-27 21:49:53
Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解_javascript技巧
Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解_javascript技巧:KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。非常棒。比如列表數(shù)據(jù)項(xiàng)增減后，不需要重新刷新整個(gè)控件片段或自己寫JS增刪節(jié)點(diǎn)，只要預(yù)先定義模板和符合其語法定義的屬性即可。簡單的說，我們只需要關(guān)注數(shù)據(jù)的存取。 一、引言 由于最近公司的系統(tǒng)需要改版，改
導(dǎo)讀Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解_javascript技巧:KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。非常棒。比如列表數(shù)據(jù)項(xiàng)增減后，不需要重新刷新整個(gè)控件片段或自己寫JS增刪節(jié)點(diǎn)，只要預(yù)先定義模板和符合其語法定義的屬性即可。簡單的說，我們只需要關(guān)注數(shù)據(jù)的存取。 一、引言 由于最近公司的系統(tǒng)需要改版，改
KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。非常棒。比如列表數(shù)據(jù)項(xiàng)增減后，不需要重新刷新整個(gè)控件片段或自己寫JS增刪節(jié)點(diǎn)，只要預(yù)先定義模板和符合其語法定義的屬性即可。簡單的說，我們只需要關(guān)注數(shù)據(jù)的存取。
一、引言
由于最近公司的系統(tǒng)需要改版，改版的新系統(tǒng)我打算使用KnockoutJs來制作Web前端。在做的過程中，遇到一個(gè)問題——如何使用KnockoutJs來完成分頁的功能。在前一篇文章中并沒有介紹使用KnockoutJs來實(shí)現(xiàn)分頁，所以在這篇文章中，將補(bǔ)充用KnockoutJs+Bootstrap來實(shí)現(xiàn)數(shù)據(jù)的分頁顯示。
二、使用KnockoutJs實(shí)現(xiàn)分頁
這里采用了兩種方式來實(shí)現(xiàn)分頁，第一種是將所有數(shù)據(jù)加載出來，然后再將所有數(shù)據(jù)分頁顯示；第二種是每次都只加載部分?jǐn)?shù)據(jù)，每次請(qǐng)求都重新加載后面的數(shù)據(jù)。
對(duì)于這兩種方式，使用Razor方式實(shí)現(xiàn)的分頁一般都會(huì)采用第二種方式來實(shí)現(xiàn)分頁，但是對(duì)于單頁面程序來說，第一種實(shí)現(xiàn)方式也有其好處，對(duì)于不是非常大量的數(shù)據(jù)完全可以采用第一種實(shí)現(xiàn)方式，因?yàn)檫@樣的話，后面的數(shù)據(jù)的加載，用戶體驗(yàn)非常的流暢。所以這里將分別介紹這兩種實(shí)現(xiàn)方式。
2.1 每次加載部分?jǐn)?shù)據(jù)的實(shí)現(xiàn)
這里的后端代碼采用的是前一篇文章的代碼，只是多加了一些示例數(shù)據(jù)而已。具體的后端實(shí)現(xiàn)代碼為：
輸出代碼執(zhí)行各個(gè)環(huán)節(jié)的執(zhí)行時(shí)間",
Owner = "Tonny Li",
FinishTime = DateTime.Parse(DateTime.Now.AddDays(4).ToString(CultureInfo.InvariantCulture))
},
new Task
{
Id =5,
Name = "測試任務(wù)1",
Description = "測試任務(wù)1",
Owner = "李志",
FinishTime = DateTime.Parse(DateTime.Now.AddDays(5).ToString(CultureInfo.InvariantCulture))
},
new Task
{
Id =6,
Name = "測試任務(wù)2",
Description = "測試任務(wù)2",
Owner = "李志",
FinishTime = DateTime.Parse(DateTime.Now.AddDays(6).ToString(CultureInfo.InvariantCulture))
},
new Task
{
Id =7,
Name = "測試任務(wù)3",
Description = "測試任務(wù)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前端的實(shí)現(xiàn)代碼：
對(duì)應(yīng)的Js實(shí)現(xiàn)為：
這里介紹了下使用KnockoutJs實(shí)現(xiàn)分頁功能的實(shí)現(xiàn)思路：
1.頁面加載完成之后，發(fā)起Ajax請(qǐng)求去異步調(diào)用REST 服務(wù)來請(qǐng)求部分?jǐn)?shù)據(jù)。
2.然后將請(qǐng)求的數(shù)據(jù)通過KnockoutJs綁定顯示。
3.將對(duì)應(yīng)的分頁信息綁定到Bootstrap分頁中
4.當(dāng)用戶點(diǎn)擊翻頁時(shí)，再發(fā)起一個(gè)Ajax請(qǐng)求去異步調(diào)用Rest服務(wù)請(qǐng)求數(shù)據(jù)，再將請(qǐng)求的數(shù)據(jù)顯示出來。
這上面是描述的代碼的調(diào)用邏輯關(guān)系，你可以參考對(duì)應(yīng)的JS代碼來理解上面的描述。到此我們第二種實(shí)現(xiàn)方式就實(shí)現(xiàn)完成了。
2.2 第一次加載所有數(shù)據(jù)，然后將所有數(shù)據(jù)分頁顯示
接下來就介紹了第一種實(shí)現(xiàn)方式，這樣的實(shí)現(xiàn)方式，用戶只會(huì)在第一次的時(shí)候才會(huì)感覺到數(shù)據(jù)加載中，翻頁過程中感覺不到頁面的加載，這樣對(duì)于一些本身數(shù)據(jù)了不是太多的情況下，對(duì)于用戶的感覺也是更加流暢的。
其具體的實(shí)現(xiàn)思路，也就是將請(qǐng)求的數(shù)據(jù)不要全部顯示在頁面上，因?yàn)閿?shù)據(jù)太多，一下子顯示到頁面中，用戶可能會(huì)眼花繚亂。將數(shù)據(jù)分頁顯示將使得用戶查看更加清晰。
具體的Web前端Js的實(shí)現(xiàn)代碼為：
其前端頁面的實(shí)現(xiàn)與前面的實(shí)現(xiàn)類似。具體頁面代碼如下：
三、運(yùn)行效果
接下來，讓我們看看，使用KnockoutJs實(shí)現(xiàn)的分頁效果：
四、總結(jié)
到這里，本文要介紹的內(nèi)容就結(jié)束，盡管本文實(shí)現(xiàn)的內(nèi)容相對(duì)比較簡單，但是對(duì)于一些剛接觸KnockoutJs的朋友來說，相信本文的實(shí)現(xiàn)會(huì)是一個(gè)很多的指導(dǎo)。接下來，我將會(huì)為大家分享下AngularJs的相關(guān)內(nèi)容。
以上所述是小編給大家介紹的Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解，希望對(duì)大家有所幫助！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解_javascript技巧
Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁效果實(shí)例詳解_javascript技巧:KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。非常棒。比如列表數(shù)據(jù)項(xiàng)增減后，不需要重新刷新整個(gè)控件片段或自己寫JS增刪節(jié)點(diǎn)，只要預(yù)先定義模板和符合其語法定義的屬性即可。簡單的說，我們只需要關(guān)注數(shù)據(jù)的存取。 一、引言 由于最近公司的系統(tǒng)需要改版，改
