Angularjs中使用jquery分页控件

  首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨。

  分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用。接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法。

  首先在web项目中引用jquery1.10、Angularjs库文件以及jq-pagination控件。

  我降指令名称为custompagination,为指令添加Html样式。

  

  然后给指令添加对应的控制器。

  

  指令使用时,html页面代码如下

  

  对应控制器数据获取的方法为

    

  控件的最终使用效果。

    

  注意事项:jquery控件的调用更多的是使用一种同步的方式,而Angularjs获取后台数据则全部采用的是异步方式,在同时使用jquery和Angularjs时需要注意将两种不同的编程思想结合起来。在本例中最大的问题是在使用Angularjs获取后台数据后如何将新的分页情况通知给jquery分页控件,然后刷新分页控件的页面数据。本例是在Angularjs和jquery代码中各进行一次回调来实现的。其实也可以在Angularjs指令中使用watch来监视分页控件数据的变化达到刷新页面的目的,欢迎各位作进一步的探索。

时间: 2025-01-01 22:42:42

Angularjs中使用jquery分页控件的相关文章

在DevExpress程序中使用Winform分页控件直接录入数据并保存

一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数据,这种对于字段比较少,而且内容相对比较简单的情况下,效率是比较高的一种输入方式.本篇随笔主要介绍在DevExpress程序中使用GridView直接录入数据并保存的实现,以及使用Winform分页控件来进行数据直接录入的实现操作. 1.在GridView上展示数据 在GridView上展示数据,只

【经验】Angularjs 中使用 layDate 日期控件

layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指

Combining AngularJS with existing Components(angularjs 中使用已有的控件)

This is a preview-quality chapter of our continuously deployed eBook on AngularJS for .NET developers. You can read more about the project at http://henriquat.re. You can also follow us on twitter (Project:@henriquatreJS, Authors: @ingorammer and @ch

jquery 分页控件功能

 //分页 <script>         function getPageNum(num) {             $("#PageNum ul").empty();             var AllCount = num;             var total = Math.ceil(AllCount / 5); //数据可分的页数             $("#txtAll").val(total);             f

sql分页存储过程配合jquery 分页控件

ALTER PROCEDURE [dbo].[getData] -- Add the parameters for the stored procedure here@tb varchar(150),@status nchar(2),@indexpage int,@endpage intASdeclare @str varchar(200)if @status is nullBEGIN set @str='SELECT * FROM (SELECT ROW_NUMBER() OVER (orde

jQueryPager20160918 分页控件

分享一下自己在项目中引用的Jquery分页控件 index.html内容 <!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>简单的jQuery分页插件下载</title> <style> *{

基于Bootstrap仿淘宝分页控件实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text

【干货】再上数据分页控件 ━ 更加灵活,更加实用-提供源码

再上数据分页控件-更加灵活,更加实用 关于数据分页的文章太多了,各有各的一套方案,但大多都很类似,要么使用存储过程,要么直接使用代码进行分页.各种方案分页的效率也不尽相同,我们不一定要找一个最高效的(根据实际的项目情况),找一个最合适的就OK了.下面我要谈的分页控件非常灵活,可以支持任意类型的数据库,同时可以支持存储过程或代码分页(会自动判断),也支持多表的分页,非常的方便.对于数据分页的相关文章,在我的博客中可以找到很多,下面我做一个简单的汇总,方便大家查阅. 1. 原创企业级控件库之大数据量

福利到~分享一个基于jquery的分页控件

前台分页控件有很多,以下是我的实现.默认情况下,点击页码会像博客园一样,在url后面加上"#p页码". 有2个参数需要注意: beforeRender: 在每个页码项呈现前会被调用,参数为页码的jQuery对象.这个时候我们可以在呈现前做一些处理,例如增加自己的属性等.默认情况下,点击页码,会在url后面加上“#p页码”,这样的url并不会刷新页面.如果我们需要刷新页面,例如url为,"default.aspx?index=页码",就可以在这个回调函数里处理. ca