前台ajax加载数据
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquerytemplate.js"></script>
function sendPostRequest(targetUrl, parameters, successCallback, errorCallback) {
$.ajax({
type: "POST",
url: targetUrl,
data: parameters,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: successCallback,
timeout: 30000,
error: function (e) {
if (e.responseText == "") return;
if (e.status == 300) {
if (JSON.parse(e.responseText) == "RequireLogon") {
return;
} else if (JSON.parse(e.responseText) == "Unauthorized") {
return;
}
} else if (e.status == 401 && e.statusText == "Unauthorized") {
return;
}
if (e.statusText == "timeout") {
alert("服务器忙");
errorCallback && errorCallback(e);
} else if (e) {
errorCallback && errorCallback(e);
}
}
});
}
function drawPagination(container, pageIndex, pageSize, dataCount, pageChangedCallback) {
if (dataCount > 0) {
var pageCount = parseInt((dataCount + pageSize - 1) / pageSize);
var contents = new Array();
contents.push('<div class="dataPager clearfix">');
if (pageIndex > 1) {
contents.push('<a id="pager_lbnFirst" value=1>首页</a>');
contents.push('<a id="pager_lbnPrev" value=' + (pageIndex - 1) + '>< 上一页</a>');
}
contents.join('<span id="pPages">');
for (var i = pageIndex - 4; i <= pageIndex + 4; i++) {
if (i == pageIndex) {
contents.push('<a id="pager_lbPage' + i + '" disabled="disabled" class="yemaa" style="margin-left:5px;margin-right:5px;text-decoration:none;">' + i + '</a>');
} else if (i > 0 && i <= pageCount) {
contents.push('<a id="pager_lbPage' + i + '" value=' + i + ' style="margin-left:5px;margin-right:5px;">' + i + '</a>');
}
}
contents.join('</span>');
if (pageIndex < pageCount) {
contents.push('<a id="pager_lbnNext" value=' + (pageIndex + 1) + '>下一页 ></a>');
contents.push('<a id="pager_lbnLast" value=' + pageCount + '>末页</a>');
}
contents.push('共 <span id="pager_lblTotalCount">' + dataCount);
contents.push('</span> 条 每页 <span id="pager_lblPageSize">' + pageSize);
contents.push('</span> 条 第 <span id="lblCurrentPage">' + pageIndex + '</span> / <span id="pager_lblTotalPage">' + pageCount + '</span> 页</div>');
container.html(contents.join(''));
if (pageChangedCallback) {
$("a", container).click(function () {
var self = $(this);
if (!self.attr("disabled")) {
pageChangedCallback(self.attr("value"));
}
});
}
container.show();
} else {
container.html('');
container.hide();
}
}
<script type="text/javascript">
var paging = {
PageIndex: 1,
PageSize: 10
};
//查询的方法
function queryOrders(pageIndex, pageSize) {
if (!pageIndex) pageIndex = paging.PageIndex;
pageSize = pageSize || paging.PageSize;
var pagination = getQueryOrdersPagination(pageIndex, pageSize);
var parameters = getCondition(pagination);
var condition = JSON.stringify({ "condition": parameters });
sendPostRequest("/IntegralRull/FindIntegralRull", condition, function (data) {
bindData(data);
}, function (e) {
if (e.statusText == "timeout") {
alert("服务器忙");
} else {
alert(e.responseText);
}
});
return false;
}
//查询的条件
function getCondition(pagination) {
pagination.BeginDate = $.trim($("#beginTime").val());
pagination.EndDate = $.trim($("#endTime").val());
pagination.Enable = -1;// $.trim($("").val());
return pagination;
}
function getQueryOrdersPagination(pageIndex, pageSize) {
return { "Pz": pageSize, "Pn": pageIndex };
}
function bindData(data) {
$("#dataList").html($("#temp").tmpl(data.Data));
drawPagination($("#pager"), data.Pagination.PageIndex, data.Pagination.PageSize, data.Pagination.RowCount, queryOrders);
}
$(function () {
queryOrders(paging.PageIndex, paging.PageSize);
$("#btnSearch").click(function () {
queryOrders(paging.PageIndex, paging.PageSize);
});
});
</script>
<script type="text/x-jquery-tmpl" id="temp">
<tr>
<td>${Id}</td>
<td>${money}</td>
<td>${Integral}</td>
<td>${CreateDate}</td>
<td>${ifEnable}</td>
<td>删除</td>
</tr>
</script>
前台ajax加载数据的更多相关文章
- 一起学爬虫——如何爬取通过ajax加载数据的网站
目前很多网站都使用ajax技术动态加载数据,和常规的网站不一样,数据时动态加载的,如果我们使用常规的方法爬取网页,得到的只是一堆html代码,没有任何的数据. 请看下面的代码: url = 'http ...
- Ajax加载数据的使用
需求就是不能再进入页面时加载数据,只能在点击其中一个按钮时把数据加载呈现出来.具体效果如最下面的图. 1.前台页面 <h1 " onclick="GetData(1)&quo ...
- Ajax 加载数据 练习 自我有些迷糊了,写的大概请谅解 ^ _ ^
查询表的显示,查询显示如果不嵌入PHP代码的话,用ajax怎么实现? <h1>显示数据</h1> <table width="100%" bord ...
- table+ajax加载数据
//ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...
- Ajax加载数据后百度分享实例
<script type="text/javascript"> //百度分享 function baidu_share() { var title_val = $(&q ...
- ext grid 前台grid加载数据碰到数据重复只显示一条
在使用gridPanel的时候,如果其数据有字段名为“id”,且数据中id值相同的情况时,相同id的数据只会显示一条,这是因为Ext读取JSON数据的时候采用了类似主键唯一的方式,而这里的主键默认叫“ ...
- ajax 加载数据前的刷新动画
$(document).ready(function(){ $.ajax({ type:"get", cache:false, u ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- Bootstrap-Select 动态加载数据的小记
关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.html#lotui bootstrap- ...
随机推荐
- [ext4]08 磁盘布局 - CheckSums
从2012年开始,Ext4和jbd2的元数据中都开始加入checksums.特性标识是metadata_csum.Checksum算法是在super_block中指定: struct ext4_sup ...
- Java提高(一)---- HashMap
阅读博客 1, java提高篇(二三)-----HashMap 这一篇由chenssy发表于2014年1月,是根据JDK1.6的源码讲的. 2,Java类集框架之HashMap(JDK1.8)源码剖析 ...
- VS2015如何新建C++或者C语言版的lib文件
当我们不想公开我们的代码的时候,可以把我们的代码封装成静态数据连接库,即lib文件.下面介绍下如何生成lib文件. 以VS2015为例,一种是C++版的lib文件,一种是C语言版的lib文件. 一.按 ...
- Web 版 PowerDesigner (Canvas) 技术
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形. ...
- Java常见快捷键
1.Alt+/ 补充代码 2.shift+d 删除选中代码同时删除空格 3.shift+alt+R 改变所有与选中部分相同的字符串 4.ctrl+S 保存代码 5.ctrl+shift+F 格式化代码 ...
- Spring Boot 之构建Hello Word项目
1.创建一个maven项目 如下步骤: (第一步) (第二步) (第三步) 2.配置pom.xml文件 加载一些依赖包.字符集.指定jdk.编译插件. <project xmlns=" ...
- win彩 百款皮肤任选任换.可视化
- [刷题]Codeforces 786A - Berzerk
http://codeforces.com/problemset/problem/786/A Description Rick and Morty are playing their own vers ...
- swift 取消UIButton选中高亮状态
objc可以用通过重写setHighlighted方法来达到当按钮选中时的高亮状态 -(void)setHighlighted:(BOOL)highlighted{ } swift中取消高亮状态 ov ...
- MySQL全文检索初探
本文目的 最近有个项目需要对数据进行搜索功能.采用的LAMP技术开发,所以自然想到了MySQL的全文检索功能.现在将自己搜集的一些资料小结,作为备忘. MySQL引擎 据目前查到的资料,只有MyISA ...