jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。一、要引用的文件要使用jqGrid，首先页面上要引入如下css与js文件。 1、css <link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 2、js<script src=/Scripts/js/jquery-2.0.3.min.js type="text/javascript"></script><script src=/Scripts/js/jqGrid/jquery.jqGrid.min.js type="text/javascript"></...
在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个jQuery的分页插件，该插件主要实现上下翻页，输入数字跳转等功能。具体实现如下： 输入参数需要当前页码pageNo，总页码totalPage，回调函数callback。 主要的实现有两个函数，一个是根据当前页和总页数生成相应的html的代码，一个是事件绑定及回调函数的执行。 creatHtml函数：creatHtml:function(){var me=this;var content="";//当前页码var current=me.options....
在公司实习看到公司框架里使用了ligerUI的grid进行分页，个人感觉挺好用的，自己摸索着实现了一遍记录下来 简单来说，liger grid 就是提交准备好的数据到指定的目标请求数据，拿到数据以后，显示出来（通过ajax实现）。 ligerGrid是ligerui系列插件的核心控件，用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等。 这里只实现基于ligerUI的分页 LigerUI的分页方式有两种：local和server。如果数...
OK，上次完成了客户端的分页，这次我们就在上一次的Demo上进行修改，来实现服务端的分页~ js代码： <script type="text/javascript"> $(document).ready(function() {$(#table_id_example).DataTable({"bProcessing" : false, //是否显示加载"sAjaxSource" : /datatableDemo/user/json, //请求资源路径"serverSide": true, //开启服务器处理模式/*使用ajax，在服务端处理数据sSource:即是"sAjaxSource"aoData:要传递到服务端的参数...
$.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )url是必选参数，表示json数据的地址； data是可选参数，用于请求数据时发送数据参数； success是可参数，这是一个回调函数，用于处理请求到的数据。 //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <div id="notice_pages"></div> <script> var roolurl = "http://" + window.location.host; var urlAshx = r...
困惑了我一段时间的网页分页，今天特地整理了一下我完成不久的项目。下面我要分享下我这个项目的分页代码，前后端通吃。希望前辈多多指教。 一、效果图 下面我先上网页前台和管理端的部分分页效果图，他们用的是一套代码。二、上代码前的一些知识点 此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。三、前台代码部分var pageSize =6; //每页显示多少条记录 v...
本文实例讲述了jQuery实现的简单分页。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS分页Class - 风干的果子</title> <style type="text/css"> a {margin:3px; text-deco...
这篇文章我们主要看看简单的使用jQuery pagination这个插件来实现无刷新分页，使用jQuery pagination主要作用在于分页样式的显示，而无刷新的主要原理还是使用Ajax，具体看下文： 首先，我们引入jQuery文件、jQuery pagination文件和jQuery Templates文件。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script src="http://www.jquery001.com/js/jquery.t...
一、问题描述 园友是做前端的，产品经理要求他使用jQuery DataTables插件显示一个列表，要实现分类效果。 后端的分页接口已经写好了，不涉及条件查询，需要传入页码(pageNo)和页面显示数据条数(pageSize)，显示相应页的显示记录，且不能修改后端接口。 二、分析 先来分析下分页实现。 一是后端分页：这种情况下，在后端很容易实现，在官网上有示例，不多说明。 二是前端分页：前端分页也是支持的，不过需要一次把所有数据都获取到才...
EasyUI 的 datagrid 支持服务器端分页，但是官方的资料比较少，以下总结了两种 datagrid 的服务器端分页机制，可根据情况具体使用。 一、使用 datagrid 默认机制 后台： public JsonResult GetQuestionUnit() { // easyui datagrid 自身会通过 post 的形式传递 rows and page int pageSize = Convert.ToInt32(Request["rows"]); int pageNum = Convert.ToInt32(Request["page"]);var dal = new QsQuestionUnitDal(); var question...
本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码，供大家参考，具体内容如下 1、Model层代码 using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System....
本文实例为大家分享了JQuery的Pager分页器的具体实现代码，供大家参考，具体内容如下 效果图：代码： html代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>分页器</title><link href="pager.css" rel="stylesheet"/> </head> <body><div id="pager"></div><script src="pager.js"></script><script>function doChangePage(obj){//TO DO}var pagerBox = document.getElementById(pager);var pager = n...
本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码，供大家参考，具体内容如下 1.使用插件为 jquery.pagination.js ，如果没有这个js文件的话，我可以给发个。 首先引用 jquery.pagination.js （分页js），跟pagination.css（分页样式css）。 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化，修改显示条数，修...
前台分页控件有很多，这里分享我的分页控件 pagination.js 1.0版本，该控件基于jquery。 先来看一下预览效果：默认情况下，点击页码会像博客园一样，在url后面加上"#p页码"。 控件有2个参数需要注意： 1. beforeRender: 在每个页码项呈现前会被调用，参数为页码的jQuery对象。这个时候我们可以在呈现前做一些处理，例如增加自己的属性等。默认情况下，点击页码，会在url后面加上“#p页码”，这样的url并不会刷新页面。如果我们需要...
扩展JQuery很容易，作为一个练习，编写一个简单的分页插件，代码量不大，直接看代码好了：$.fn.mypagination = function(totalProperty,opts){ opts = $.extend({ perPage:10, callback:function(){ } },opts||{}); return this.each(function(){ function numPages(){ return Math.ceil(totalProperty/opts.perPage); } function selectPage(page){ return function(){ currPage = page; if (page<0) currPage = 0; if (page>=num...