位置: 编程技术 - 正文

Bootstrap与KnockoutJs相结合实现分页效果实例详解

编辑:rootadmin

推荐整理分享Bootstrap与KnockoutJs相结合实现分页效果实例详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后,不需要重新刷新整个控件片段或自己写JS增删节点,只要预先定义模板和符合其语法定义的属性即可。简单的说,我们只需要关注数据的存取。

一、引言

  由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端。在做的过程中,遇到一个问题——如何使用KnockoutJs来完成分页的功能。在前一篇文章中并没有介绍使用KnockoutJs来实现分页,所以在这篇文章中,将补充用KnockoutJs+Bootstrap来实现数据的分页显示。

二、使用KnockoutJs实现分页

  这里采用了两种方式来实现分页,第一种是将所有数据加载出来,然后再将所有数据分页显示;第二种是每次都只加载部分数据,每次请求都重新加载后面的数据。

  对于这两种方式,使用Razor方式实现的分页一般都会采用第二种方式来实现分页,但是对于单页面程序来说,第一种实现方式也有其好处,对于不是非常大量的数据完全可以采用第一种实现方式,因为这样的话,后面的数据的加载,用户体验非常的流畅。所以这里将分别介绍这两种实现方式。

2.1 每次加载部分数据的实现

   这里的后端代码采用的是前一篇文章的代码,只是多加了一些示例数据而已。具体的后端实现代码为:

  Web前端的实现代码:

  对应的Js实现为:

  这里介绍了下使用KnockoutJs实现分页功能的实现思路:

1.页面加载完成之后,发起Ajax请求去异步调用REST 服务来请求部分数据。

2.然后将请求的数据通过KnockoutJs绑定显示。

Bootstrap与KnockoutJs相结合实现分页效果实例详解

3.将对应的分页信息绑定到Bootstrap分页中

4.当用户点击翻页时,再发起一个Ajax请求去异步调用Rest服务请求数据,再将请求的数据显示出来。

  这上面是描述的代码的调用逻辑关系,你可以参考对应的JS代码来理解上面的描述。到此我们第二种实现方式就实现完成了。

2.2 第一次加载所有数据,然后将所有数据分页显示

  接下来就介绍了第一种实现方式,这样的实现方式,用户只会在第一次的时候才会感觉到数据加载中,翻页过程中感觉不到页面的加载,这样对于一些本身数据了不是太多的情况下,对于用户的感觉也是更加流畅的。

  其具体的实现思路,也就是将请求的数据不要全部显示在页面上,因为数据太多,一下子显示到页面中,用户可能会眼花缭乱。将数据分页显示将使得用户查看更加清晰。

具体的Web前端Js的实现代码为:

  其前端页面的实现与前面的实现类似。具体页面代码如下:

三、运行效果

  接下来,让我们看看,使用KnockoutJs实现的分页效果:

四、总结

  到这里,本文要介绍的内容就结束,尽管本文实现的内容相对比较简单,但是对于一些刚接触KnockoutJs的朋友来说,相信本文的实现会是一个很多的指导。接下来,我将会为大家分享下AngularJs的相关内容。

以上所述是小编给大家介绍的Bootstrap与KnockoutJs相结合实现分页效果实例详解,希望对大家有所帮助!

个人网站留言页面(前端jQuery编写、后台php读写MySQL) 首先,上个人网站的留言页面,大家可以看看效果:留言板前端为了省事,使用jQuery编写,后台使用php简单读写MySQL数据库。数据库设计和实现思路数据

基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 本文实例为大家分享使用jQuery实现输入框组input-group的添加与删除操作,供大家参考,具体内容如下注意这里要求使用到Bootstrap框架的输入框组,如:div

小白谈谈对JS原型链的理解 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好。不要纠结于那一堆术语了

标签: Bootstrap与KnockoutJs相结合实现分页效果实例详解

本文链接地址:https://www.jiuchutong.com/biancheng/369938.html 转载请保留说明!

上一篇:原生JS封装Ajax插件(同域、jsonp跨域)(js原生实现ajax)

下一篇:详解JavaScript编程中正则表达式的使用(编程javascript)

  • 航天信息开票软件
  • 税收的本质是什么意思?
  • 红冲的发票能不能取消
  • 小规模纳税人实收资本
  • 签证费没有发票可以入账吗
  • 事业单位补发以后的工资
  • 车辆购置税完税证明网上打印
  • 丢失发票已报税证明单取消
  • 典当业销售的死当物品是否交增值税
  • 发票冲红重开摘要如何写合适?
  • 委托加工的材料计入什么科目
  • 收到款未开发票挂账入什么科目?
  • 房屋所有权变更登记证书
  • 固定资产领用流程图
  • 机票行业一定要开发票吗?
  • 税控技术服务费计入什么科目
  • 生产车间员工体检费怎么入账
  • 办税员实名认证变更
  • 小规模商贸公司成本核算方法
  • 税务局怎么知道你的收入
  • 土地在会计中怎么处理
  • 无形资产怎么计算摊销
  • 出口退税两单两票
  • 私募股权投资
  • 进项认证转出 会计得入账吗
  • 应付账款是贵公司欠还是欠贵公司
  • 上市公司的组织形式
  • win7系统我的电脑图标不见了
  • 大陆公司如何开离岸账户
  • 劳动合同到期补偿金怎么算
  • 职工福利费会计账务处理
  • 如何发放年终奖 一个蒸蒸日上的公司,当
  • 窗函数的作用
  • 固定资产的预计使用寿命和净残值发生变更
  • 金融机构同业外汇存款账户管理办法
  • 计提本月附加税2496.28
  • php中的正则表达式怎么使用
  • 应付职工薪酬会产生暂时性差异吗
  • 增值税和所得税重复交了吗
  • 谁能代替你啊
  • 有没有网上学电脑的
  • 已勾选确认的发票忘记填写怎么办
  • 事业单位收到银行利息如何记账
  • 现金股利算负债吗
  • 补开上年发票的税务处理要怎么做?
  • 企业筹建期间
  • python的爬虫
  • 织梦商城网站源码
  • 应收帐款质保金
  • 个税中的免税收入都包括什么
  • 税法中对差旅费的处理
  • 借款人和还款人不一致,收据打给谁
  • 税控盘服务费小规模可以抵扣吗
  • 工会经费计税依据是应发还是实发
  • 发放个税返还用不用申报
  • 招标代理专家库合法吗
  • 会计科目用错如何改正
  • 开红字发票必须要收回原发票并作废吗?
  • 内账咋做
  • win10蓝屏怎么修复系统
  • mac怎么自定义桌面图标
  • winhelp.exe - winhelp是什么进程
  • win7怎么查看
  • 内存 服务器
  • win7打印无反应
  • win10系统安装搜狗输入法很慢
  • quick3.3 UIListview扩展应用
  • ios平台中glsl中shadow2DProjEXT函数的简单说明以及变换矩阵的小注意点
  • Android使用活动需要去什么进行注册
  • perl获取文件名
  • unity 静态函数
  • ansible客户端需要装python
  • android设置音量
  • 社保申报后多久缴费
  • 佛山顺德怎么坐地铁到广州
  • 改革开放四十年是几几年
  • 房山税收减免政策文件
  • 关于税制的问题
  • 宁夏地税局电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设