jQuery、Ajax分页
1、效果预览
2、HTML代码
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
<table class="table table-striped table-hover table-bordered bootstrap-datatable " id="TemplateTable">
<thead>
<tr>
<td>模板名称</td>
<td style="width: 400px;">短信内容</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
<div style="font-size: 14px;">共<label style="color: #20A8D8; font-size: 14px;" id="pageCount">0</label>条记录</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
<div id="MainContent_AspNetPager_Msg" class="paginator">
<a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="FirstPage" pageindex="1">首 页 </a>
<a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="TopPage" pageindex="0">← 上一页</a>
<span class="cpb" style="margin-right: 5px; cursor: pointer;" id="CurrenPageSize">1</span>
<a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="NextPage" pageindex="0">→ 下一页</a>
<a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="LastPage" pageindex="0"> 尾 页 </a>
</div>
</div>
</div>3、JS代码
//载入短信模板内容-分页
function TemplateAjax() {
$('#TemplateTable tbody tr').remove();//清空Table tbody
AjaxPage(1, PageSize);
}
//当前页，显示条数
function AjaxPage(curpage, PageSize) {
//省
var ProvinceId = $('#MainContent_ddlsheng').val();
//市
var CityId = $('#MainContent_ddlshi').val();
$.ajax({
cache: false,
url: "/ajaxpage/getajax.aspx?t=smsplateformtemplateajaxpage&ProvinceId=" + ProvinceId + "&CityId=" + CityId + "&CurPage=" + curpage + "&PageSize=" + PageSize + "&a=" + Math.random(),
dataType: 'json',
success: function (data) {
if (data != null) {
var str = '';
for (var i in data["Data"]) {
var Content = data["Data"][i]["SmsTemplateContent"];
if (Content.length >= 60) {
Content = Content.substring(0, 60);
}
str += "<tr><td>" + data["Data"][i]["SmsTemplateName"] + "</td><td>" + Content + "</td><td><input type='button' value=' 删 除 ' class='btn btn-primary' onclick='TemplateDelete(" + data["Data"][i]["Id"] + ")'/></td></tr>";
}
$('#TemplateTable tbody').html(str);
RecordCount = data["RecordCount"];
$('#pageCount').html(RecordCount);
}
}
})
}
//首页、上一页、下一页、尾页点击
function PageIndexClick(obj) {
//当前第几页
var CurrenPageSize = $('#CurrenPageSize').html();
//id
var type = $(obj).attr('id');
//首页
if (type == 'FirstPage') {
CurrenPageSize = 1;
AjaxPage(CurrenPageSize, PageSize);
$('#CurrenPageSize').html('1');
}
//上一页
else if (type == 'TopPage') {
if (CurrenPageSize > 1) {
CurrenPageSize = parseInt(CurrenPageSize) - 1;
} else {
CurrenPageSize = 1;
}
AjaxPage(CurrenPageSize, PageSize);
$('#CurrenPageSize').html(CurrenPageSize);
}
//下一页
else if (type == 'NextPage') {
var size = parseInt(CurrenPageSize) + 1;
var maxpage = RecordCount % PageSize == 0 ? parseInt(RecordCount / PageSize) : (parseInt(RecordCount / PageSize) + 1);
if (size <= maxpage) {
CurrenPageSize = parseInt(CurrenPageSize) + 1
}
AjaxPage(CurrenPageSize, PageSize);
$('#CurrenPageSize').html(CurrenPageSize);
}
//尾页
else if (type == 'LastPage') {
CurrenPageSize = (RecordCount % PageSize == 0 ? parseInt(RecordCount / PageSize) : parseInt(RecordCount / PageSize) + 1);
AjaxPage(CurrenPageSize, PageSize);
$('#CurrenPageSize').html(CurrenPageSize);
}
}
//删除模板
function TemplateDelete(id) {
$.ajax({
cache: false,
url: "/ajaxpage/getajax.aspx?t=smsplateformtemplateajaxdelete&Id=" + id + "&a=" + Math.random(),
dataType: 'json',
success: function (data) {
if (data != null) {
alert(data['result']);
AjaxPage(1, PageSize);
}
}
});
}
4、C#后台代码
if(Request.QueryString["t"] == "smsplateformtemplateajaxpage")
{
try
{
string ProvinceId = Request.QueryString["ProvinceId"];
string CityId = Request.QueryString["CityId"];
int CurPage = 1;//当前第几页
int.TryParse(Request.QueryString["CurPage"], out CurPage);
int PageSize = 5;//每页显示多少条数据
int.TryParse(Request.QueryString["PageSize"], out PageSize);
StringBuilder sb = new StringBuilder();
sb.Append(" 1=1 and (delete_flag IS NULL OR delete_flag=0)");
//省
if (ProvinceId != null && !string.IsNullOrEmpty(ProvinceId) && ProvinceId != "0")
{
sb.Append(string.Format(" and ProvinceId={0} ", ProvinceId.Trim()));
}
//市
if (!string.IsNullOrEmpty(CityId) && CityId != "0" && CityId != "null")
{
sb.Append(string.Format(" and CityId={0} ", CityId.Trim()));
}
PageArgs pageArgs = new PageArgs();
pageArgs.PageSize = PageSize;
pageArgs.PageIndex = CurPage;
pageArgs.TableName = "D_SMSTemplate";
pageArgs.PrimaryKey = "Id";
pageArgs.Fields = "";
pageArgs.Filter = sb.ToString();
pageArgs.Order = " create_time desc";
IList<SMSTemplateEntity> list = new SMSTemplateBLL().GetSMSTemplateAll(ref pageArgs);
List<Dictionary<string, object>> li = new List<Dictionary<string, object>>();
Dictionary<string, object> dic = new Dictionary<string, object>();
dic.Add("RecordCount", pageArgs.RecordCount);//总条数
dic.Add("Data", list);
JavaScriptSerializer serializer = new JavaScriptSerializer();
var result = serializer.Serialize(dic);
Response.Write(result);
}
catch
{
Response.Write(null);
}
}
******************************************别墅图纸推荐*************************************************
我想有一栋别墅。面朝大海，春暖花开
龙兴科技别墅图纸设计，这里有最新最全的别墅图纸，
这里有最给力的别墅图纸折扣活动。图纸包含建筑图、结构图、给排水图、电气图
我们致力于为广大客户提供别墅设计图纸,图纸均由专业、经验丰富的设计团队设计，可免费提供施工技术指导
版权声明：本文博客原创文章，博客，未经同意，不得转载。
