jQuery、Ajax分頁

標籤：ajax   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);                }            }