SUI分页组件和avalon搞定ajax无刷新分页
<div ms-controller="main">
<h2 class="pagination-centered">{{ title }}</h2>
<form method="get" action="" class="sui-form" style="margin-bottom:5px;">
重量:<input class="input-medium" type="text" name="weight" value="@ViewBag.weight" id="weight" />
内容:<input class="input-medium" type="text" name="content" value="@ViewBag.content" id="content" />
解释:<input class="input-medium" type="text" name="intro" value="@ViewBag.intro" id="intro" />
每页:<input class="input-mini" type="text" name="pageSize" value="@ViewBag.pageSize" id="pageSize" />
<input class="sui-btn btn-medium btn-primary" type="submit" name="search" value="查询" id="search" />
</form>
<table class="sui-table table-zebra table-hover table-primary">
<thead>
<tr>
<th width="40">重量</th>
<th width="230">内容</th>
<th>解释</th>
</tr> </thead>
<tbody>
<tr ms-repeat="datalist">
<td style="text-align:center;">{{ el.weight }}</td>
<td>{{ el.content | html }}</td>
<td>{{ el.intro | html }}</td>
</tr> </tbody> </table> <div id="pager"> </div> </div> <script type="text/javascript"> $(function(){ var vm=avalon.define({
$id:"main",
title: "称骨算命",
datalist: [{"weight":"0","content":"内容","intro":"注解"}]
}); var loadData = function (pageIndex,pageSize,weight,content,intro) {
var itemsCount = 0;
$.getJSON("/home/getdata", { "page": pageIndex, "size": pageSize,"weight":weight,"content":content,"intro":intro }, function (data) {
itemsCount = data.total;
vm.datalist = data.rows; $('#pager').pagination({
itemsCount: data.total,
pageSize: pageSize,
currentPage: pageIndex,
displayPage: 6,
displayInfoType: "itemsCount",
styleClass: ['pagination-large'],
showCtrl: true,
onSelect: function (num) {
loadData(num, pageSize, weight, content, intro);
}
}); }); }; loadData(1,$("#pageSize").val(),$("#weight").val(),$("#content").val(),$("#intro").val()); }); </script>
1、控制器
public ActionResult GetData(int page=,int size=,string weight="",string content="",string intro="")
{
int itemsCount = ;
int pageSize = size;
int pageIndex = page; string where = "1=1";
if (!string.IsNullOrEmpty(weight))
{
where += " and weight = '" + weight + "'";
}
if (!string.IsNullOrEmpty(content))
{
where += " and content like '%" + content + "%'";
}
if (!string.IsNullOrEmpty(intro))
{
where += " and intro like '%" + intro + "%'";
} // List<chenggu> list = DBFast.Select<chenggu>(pageIndex, pageSize, where, out itemsCount); using (MAction action = new MAction("chenggu"))
{
return Content(action.Select(pageIndex, pageSize, where, out itemsCount).ToJson()); } //var data=new {Total=itemsCount,DataList=list};
//return Json( data, JsonRequestBehavior.AllowGet);
}
View:
SUI分页组件和avalon搞定ajax无刷新分页的更多相关文章
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- 关于Ajax无刷新分页技术的一些研究 c#
关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...
- thinkphp下实现ajax无刷新分页
1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...
- 学习笔记之AJAX无刷新分页
利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...
- ThinkPhp 3.2 ajax无刷新分页(未完全改完,临时凑合着用)
临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: <?phpnamespace Fenye\libs; /** file: page.class.php 完美分 ...
- Ajax无刷新分页
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage ...
- ajax分页2:jquery.pagination +JSON 动态无刷新分页
静态页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- jquery+jquery.pagination+php+ajax 无刷新分页
<!DOCTYPE html> <html ><head><meta http-equiv="Content-Type" content= ...
随机推荐
- Fragment提交transaction导致state loss异常
下面自从Honeycomb发布后,下面栈跟踪信息和异常信息已经困扰了StackOverFlow很久了. java.lang.IllegalStateException: Can not perform ...
- HTML5打造的炫酷本地音乐播放器-喵喵Player
将之前捣腾的音乐频谱效果加上一个播放列表就成了现在的喵喵播放器(Meow meow Player,额知道这名字很二很装萌~),全HTML5打造的网页程序,可本地运行也可以挂服务器上用. 在线Demo及 ...
- 【译】用jQuery 处理XML--写在前面的话
用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...
- MYSQL 大文件无法导入的问题。
1. 设置maxpacket. 要在[mysqld]标签下.这个疏忽了,就会发现没效果. 基本网上的都没说清,要看stackoverflow. Change in the my.ini file. I ...
- UWP入门教程1——UWP的前世今生
目录 引言 设备族群 UI 和通用输入模式 通用控件和布局面板 工具 自适应扩展 通用输入处理 引言 在本篇文章中,可以掌握以下知识: 设备族群,如何决定目标设备 新的UI控件和新面板帮助你适应不同的 ...
- SQL关联查询总结
employee表: department表: 笛卡儿积: 等值连接: 内连接(和等值连接效果是相同的): 外连接(外连接不仅返回满足条件的记录,还将返回不满足条件的记录)以下是左外连接,右外连接.全 ...
- Redis数据库的安装配置方
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/100.html?1455869650 redis 是一个高性能的key-v ...
- Atitit图像识别的常用特征大总结attilax大总结
Atitit图像识别的常用特征大总结attilax大总结 1.1. 常用的图像特征有颜色特征.纹理特征.形状特征.空间关系特征. 1 1.2. HOG特征:方向梯度直方图(Histogram of O ...
- atitit.Servlet2.5 Servlet 3.0 新特性 jsp2.0 jsp2.1 jsp2.2新特性
atitit.Servlet2.5 Servlet 3.0 新特性 jsp2.0 jsp2.1 jsp2.2新特性 1.1. Servlet和JSP规范版本对应关系:1 1.2. Servlet2 ...
- Storm 实战:构建大数据实时计算
Storm 实战:构建大数据实时计算(阿里巴巴集团技术丛书,大数据丛书.大型互联网公司大数据实时处理干货分享!来自淘宝一线技术团队的丰富实践,快速掌握Storm技术精髓!) 阿里巴巴集团数据平台事业部 ...