<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) + '>&lt; 上一页</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) + '>下一页 &gt;</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加载数据的更多相关文章

  1. 一起学爬虫——如何爬取通过ajax加载数据的网站

    目前很多网站都使用ajax技术动态加载数据,和常规的网站不一样,数据时动态加载的,如果我们使用常规的方法爬取网页,得到的只是一堆html代码,没有任何的数据. 请看下面的代码: url = 'http ...

  2. Ajax加载数据的使用

    需求就是不能再进入页面时加载数据,只能在点击其中一个按钮时把数据加载呈现出来.具体效果如最下面的图. 1.前台页面 <h1 " onclick="GetData(1)&quo ...

  3. Ajax 加载数据 练习 自我有些迷糊了,写的大概请谅解 ^ _ ^

    查询表的显示,查询显示如果不嵌入PHP代码的话,用ajax怎么实现?   <h1>显示数据</h1> <table width="100%" bord ...

  4. table+ajax加载数据

    //ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...

  5. Ajax加载数据后百度分享实例

    <script type="text/javascript"> //百度分享 function baidu_share() { var title_val = $(&q ...

  6. ext grid 前台grid加载数据碰到数据重复只显示一条

    在使用gridPanel的时候,如果其数据有字段名为“id”,且数据中id值相同的情况时,相同id的数据只会显示一条,这是因为Ext读取JSON数据的时候采用了类似主键唯一的方式,而这里的主键默认叫“ ...

  7. ajax 加载数据前的刷新动画

    $(document).ready(function(){     $.ajax({        type:"get",        cache:false,        u ...

  8. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

  9. Bootstrap-Select 动态加载数据的小记

    关于前端框架系列的可以参考我我刚学Bootstrap时候写的LoT.UI http://www.cnblogs.com/dunitian/p/4822808.html#lotui bootstrap- ...

随机推荐

  1. hibernate 多对多关系总结

    hibernate中,对对象关系的映射处理估计是最让人迷惑和头疼的,特别是cascade和inverse属性的使用,不知已经杀死了我多少个脑细胞了,好记性永远比不上烂笔头,为了能节省自己的脑细胞,降低 ...

  2. 不完全图解HTTP

    在2D平面上行走的时候,认识只局限于“点”,刚认识一个新的点,就把之前的那个点忘记了,捡了芝麻丢西瓜.只从3D视角俯瞰时,把这些点连接在一起,点成线,线成面时,才能有所顿悟.话不多说,这是我对HTTP ...

  3. 前端JS来控制选中的项

    < script type = "text/javascript" > function change(){ document.getElementById(" ...

  4. cctype学习

    #include <cctype>(转,归纳很好) 头文件描述: 这是一个拥有许多字符串处理函数声明的头文件,这些函数可以用来对单独字符串进行分类和转换: 其中的函数描述: 这些函数传入一 ...

  5. Lucene5.5.4入门以及基于Lucene实现博客搜索功能

    前言 一直以来个人博客的搜索功能很蹩脚,只是自己简单用数据库的like %keyword%来实现的,所以导致经常搜不到想要找的内容,而且高亮显示.摘要截取等也不好实现,所以决定采用Lucene改写博客 ...

  6. 深入理解IOC

    1. IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机 ...

  7. 习惯的PHP命名规则

     从C++转PHP也已经很长一段时间了,一直有点代码洁癖,对于文件名,接口名,类名,方法名等都使用严格的驼峰命名法, 但是有时候会犹豫到底用首字母大写区分还是用下划线区分.今天简单总结和规约一下. 1 ...

  8. sublime Text3 新建文件时定义模块

    开发的过程中有很多的东西,不需要每次编写,如果每次编写这样会很蛋疼,所以sublime 提供了一个牛逼的插件SublimeTmpl, 这个插件可以定义自己新建的模块. sublimeTmpl 安装 1 ...

  9. windows 上优雅的安装 node 和 npm

    windows 的一键安装包,应该是最简单的 node 安装方式. 其实很多软件,拷贝过来就可以运行,根本不需要所谓的"安装"过程. 新建一个目录专门了管理 node 和 npm  ...

  10. Spark实战之读写HBase

    1 配置 1.1 开发环境: HBase:hbase-1.0.0-cdh5.4.5.tar.gz Hadoop:hadoop-2.6.0-cdh5.4.5.tar.gz ZooKeeper:zooke ...