纯手写分页控件CSS+JS+SQL】的更多相关文章

Asp.net中虽然用DataPager配合ListView可以实现分页显示,但是有时候由于开发环境等问题不能用到DataPager控件,那么自己手工写一个分页控件就很有必要了,当然,最重要的是通用性. 首先,来看一下我的分页控件的显示效果: 简单说明:红底色的为当前页,白底红字的是选择新的页,共有1236页,默认从第1页开始显示,分页行长度含“……”共11格,有全显示,单边省略和两边省略三种模式. 当你仔细看完上图的显示效果并理解其分页的相应变化后,我们就要开始制作这个分页了:) 第一步)获取…
去年就发表过asp.net 分页-利用后台直接生成html分页 ,那种方法只是单纯的实现了分页,基本不能使用,那时就想写个自己的分页控件,无奈能力有限.最近有点时间了,就自己做出了这个分页控件.我承认,这个控件参考了别人的,但是其实里面的原理都相同,差异只是展现方式而已. 去年就在做一个自己的后台系统,刚开始用的asp.net,做了一部分就没有做了,因为缺少权限控制类别.后面转为用asp.net mvc4做,也只是做了一部分,觉得不太方便,也许是我不太会用.再用ajax+ashx做了一部分,虽然…
最近开发了一款分页控件,分享给大家. 主要功能和界面介绍 cform分页控件支持服务端分页.客户端分页.数据过滤.数据排序等功能. 源码介绍 cform-pager分页控件主要由三部分组成:css.scripts以及index.html,css主要是用于控制分页和列表的样式:scripts主要是负责分页数据抓取.分页控件.本地缓存.数据过滤.数据排序等功能:index.html则涉及了分页数据模板.分页容器以及相应的过滤.排序按钮. scripts介绍 scripts目录下面包含了cform-m…
/* pagenum:当前页数 theallnum:总条数 themeiye:每页显示多少条 */ function pagetest(pagenum, theallnum, themeiye) { $("#pages").html(""); var allnum = theallnum; //总页数 var meiye = themeiye; //每页显示条数 ; var cjnum = Math.ceil(allnum / meiye); var str = &…
.NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的人,可能对服务器端(具有runat="server"属性)的控件的回发(PostBack)特性有一定的了解.我们知道,只要 一点击页面中的Asp.net按钮(可能是LinkButton,也可能是Button,还有可能是ImageButton等)都会引起整个页面的刷新, 这样的体验是非常不好…
刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代码贴上: /** * options.id avalon 所需要的$id * options.total 总记录数 * options.rows 行数 * options.callback */ var Pager=function(options){ var _this=this; _this.c…
分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  02效果  模仿淘宝的分页按钮效果控件kkpager  JS代码: var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数…
因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过Jquery控件,硬着头皮找了些资料,写了这个分页控件,目前只在chrome测试,其他的兼容性不知道,      总算也会自己写插件了,  虽然很烂,但好歹也是进步啊,附上图片,源码,也许有人也有同样的需求可以用得到,欢迎指正,批评!! css: @charset "utf-8";* { margin:0px; padding:0px; font…
无聊,第一次写博客,自己动手写了一个分页控件.由于我是新手,有很多地方写得不够好,希望各位大牛多多指正.哈哈哈 /// <summary> /// 分页控件 /// </summary> public class Pager { /// <summary> /// 每页记录行数参数名称 /// </summary> public string PageSizeName { get; set; } /// <summary> /// 分页当前索引页…
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr…
继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页控件. 思路是自定义一个directive , 然后用isolated scope与父级controller $scope同步交互页数和当前页信息, 利用module的contant方法定义默认选项,从directive link 函数获取用户自定义选项设置.和以前写jquery插件的思路类似, 内…
最近有个小项目,用.net core开发练练手,碰到的第一个问题就是分页控件的问题,自己写太费时间,上网查了下,发现有人已经封装好了的,就拿过来用了,分页控件github:https://github.com/sgjsakura/AspNetCore/blob/master/PagerDemo.md 使用方法也很简单 后台代码如下:期中list是数据返回的数据,pagesize是每页的数量,page是当前页数,totalcount-总条数,pagenum-总页数 var model= new P…
一.说明 AspNetPager.dll这个分页控件主要用于asp.net webform网站,现将整理代码如下 二.代码 1.首先在测试页面Default.aspx页面添加引用 <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %> 2.写一个Repeater列表控件用于显示数据 <asp:Repeater ID…
.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…
今天实现一个分页控件,效果如下: 1.HTML: <!doctype html> <!--suppress ALL --> <html ng-app="appTow"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta content="always"…
分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等一些不符合自己的要求,在此之际为了项目需求,自己扩展一个分页控件js类,以便日后方便重用,现在分享这个控件. 分页控件分解: 1.初始化对象 2.分页控件绑定前台显示 3.异步调用获取数据 4.单击按钮回调事件 5.按钮单击事件 6.文本框输入事件 7.点击确定搜索事件. Html代码: <div…
不管是什么类型的网站,分页都是必不可少的功能实现.在这里记录一下我自己接触过的分页控件: 一. MvcPager控件(记得项目里添加MvcPager.dll的引用) 这里面比较常用的就 ——@Html.Page() 这里面有很多参数,具体的不一一细说,…
  http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstrap简洁美观和扁平化的同学可以关注jBootstrapPage, 目前jBootstrapPage最新版为V0.1,后续还有更多功能需要完善. demo演示地址:   http://www.it175.cn/demo/jBootstrapPage/ 代码示例: html代码 <html> <…
首先对js和css的引用 <link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script><script type="text/javascr…
国籍控件(js源码) 一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件,navtionality.js 和 mian.css.navtionality.js主要功能是国籍控件的DOM构建以及相应的事件绑定:main.css主要是用于渲染国籍控件的样式.而main.js是国籍控件的调用方法. HTML结构 国籍控件要呈现在页面上,必须事先在页面中加以设置以供控件加载使用.…
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的,我弄了个简单的asp.net例子(vs 2010).通过ajax根据每一页请求数据,数据是使用json格式进行传输,通过knockout.js绑定.在这里顺便推荐一下汤姆大叔的Knockout应用开发指南 ,是学习Knockout非常好的文章. 惯例:插件Demo        Asp.net D…
使用MVC开发也有一段时间了,总结下无刷新部分视图的使用.PagedList分页控件的使用. @using PagedList @model StaticPagedList<T> <style type="text/css"> .tab-title { background-color: #efefef; width: 10%; } .btn-custom { padding: 6px 24px !important; color: #ffffff !impor…
1.AspNetPager简介 AspNetPager是一款开源.简单易用.可定制化等等各种优点的Web分页控件. 2.使用方法 1)下载AspNetPager.dll文件(http://www.webdiyer.com/aspnetpager/downloads/) 2)添加对该文件的引用 3)工具栏右键-选择项,把该dll控件添加进工具栏 4)把该控件拖进设计界面,设置控件的各种属性如下: <webdiyer:AspNetPager ID="AspNetPager1" run…
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 第二步: 写HTML代码:这里的星星我用的是符号的星星,也可以做成图片,用2张背景图片进行切换: <div class="score_star"> <i>…
kkpager支持异步加载分页: 1.页面添加div标签和引用JS,默认标签为<div id="kkpager"></div> 引用JS和样式 <script type="text/javascript" src="../global/src/kkpager.js"></script><link rel="stylesheet" type="text/css&qu…
laypage是一款非常简单易用的分页控件,由于最近项目中使用到了,简单记录一下使用方法 1.引入laypage所需的js和css文件 <link href="js/laypage/1.3/skin/laypage.css" rel="stylesheet"/> <script type="text/javascript" src="js/laypage/1.3/laypage.js"></scr…
一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧,很强大,但是一些样式可能不是你想要的,改起来牵一发而动全身.这种情况自己写控件会好一些. [小宝鸽也是前端菜鸟,毕竟咱们算是专攻后台的,不规范的地方还望猿友指正] 费话不多说,直接看看效果吧 这效果图吧,说不上好看,但是呢,我们主要了解怎么写JQ控件的. 需要下载源码看效果的请访问链接:http:…
上一篇文章介绍了分页控件的具体实现方式,接下来我们就来做一个分页控件 后台数据处理就过度的介绍,下面针对URL分页中的下面几点做说明: 1.搜索条件的状态保持 2.点击分页需要带上搜索条件 3.页码的逻辑显示 下面就来实现分页控件 首先按照上一篇文章中 我们建立了一个UosoPagerOption 分页参数类,这里我没有准备太多的参数 public class UosoPagerOption { public int PageIndex { get; set; } public int Page…
超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 第二步: 写HTML代码:这里的星星我用的是符号的星星,也可以做成图片,用2张背景图片进行切换: <div class="score_star"> <i>…
js分页展示控件,传入简单参数就能使用的分页效果控件 在线测试链接: http://pgkk.github.io/kkpager/example/pager_test.html http://pgkk.github.io/kkpager/example/pager_test_orange_color.html http://pgkk.github.io/kkpager/example/pager_test_clickmode.html 准备工作,引入js.css <script type="…