前台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- ...
随机推荐
- wcf发布的服务在前端调用时,遇到跨域问题的解决方案
我是使用IIS作为服务的宿主,因此需要在web.config中增加如下配置节: <bindings> <webHttpBinding> <binding name=&qu ...
- c#常用方法和类
1. 数据类型转换函数 Convert.ToXXX(); XXX.Parse(); XXX.TryParse(); 2. 日期相关的类与函数 获取系统当前日期(含时间):DateTime.Now 获 ...
- Android系统--输入系统(十一)Reader线程_简单处理
Android系统--输入系统(十一)Reader线程_简单处理 1. 引入 Reader线程主要负责三件事情 获得输入事件 简单处理 上传给Dispatch线程 InputReader.cpp vo ...
- 记录下一个C++初始化的方式(很少有人这么用,但是却是一个使代码更加简洁的方式)
很多时候,在一个类创建的时候给它初始化,一般呢,99%的人都会这么用: //A.h Class CA { int a; char* p; int getValue(); }; //A.cpp CA:: ...
- 【Java SE】如何用Java实现直接选择排序
摘要:直接选择排序属于选择排序的一种,但是它的排序算法比冒泡排序的速度要快一些,由于它的算法比较简单,所以也比较适合初学者学习掌握. 适宜人群:有一定Java SE基础,明白Java的数据类型,数组的 ...
- WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一.加载网络页面 加载网络页面,是最简单的一种方式,只需要传入http的URL就可以,实现WebView加载网络页面 代码如下图: 二.加载本地页面 1.加载asse ...
- Oracle的正则应用之匹配出手机号
按照要求匹配出符合中国大陆手机号规则的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into te ...
- memcache 启动 failed to start
以为是 端口冲突,到注册表中直接改了memcache的注册表,还是启动不了.memcache运行不了,还能咋办,看防火墙有没有阻止程序运行呗 勾上,我的windows 上的memcache 就可以运行 ...
- 通过rpm 安装MYSQL
1.MYSQL Server端安装: 2.MYSQL client 安装 3.设置MYSQL密码(安装了MySql客户端才可以执行) ' 4.登录MYSQL mysql 的最简单的安装方法啦
- xml注释快捷键
eclipse中编辑Java或C/C++文件时,注释的快捷键均为 "CTRL + / ",编辑xml文件时,该快捷键无效. eclipse XML 注释:CTRL + SHIFT ...