最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

Ajax实现搜索功能的分页

来源:懂视网 责编:小OO 时间:2020-11-27 22:51:26
文档

Ajax实现搜索功能的分页

本文实例为大家分享了Ajax实现搜索功能的分页,供大家参考,具体内容如下:之前只实现了搜索功能,但是并不能分页2333,所以在上篇的基础上修改实现分页(首页,上一页,下一页,尾页,跳转页面),脑袋瓜不够用,要记下来记下来。html代码;
推荐度:
导读本文实例为大家分享了Ajax实现搜索功能的分页,供大家参考,具体内容如下:之前只实现了搜索功能,但是并不能分页2333,所以在上篇的基础上修改实现分页(首页,上一页,下一页,尾页,跳转页面),脑袋瓜不够用,要记下来记下来。html代码;

本文实例为大家分享了Ajax实现搜索功能的分页,供大家参考,具体内容如下

之前只实现了搜索功能,但是并不能分页2333,所以在上篇的基础上修改实现分页(首页,上一页,下一页,尾页,跳转页面),脑袋瓜不够用,要记下来记下来

html代码

<a class="btn-lit" type="submit" onclick="searchResult(on())"><span>搜索</span></a>
//嵌套函数,用来情空最大页数和当前页数

<div id="fenye" class="cnt-wp" style="display: none;">
 <span id="pageAjax"> 页次:{$pagefunc[1]}/{$pagefunc[4]} 每页22总数{$pagefunc[2]}</span>
 <a class="btn-lit" onclick="pageAjaxFirst()"><span>首页</span></a>
 <a class="btn-lit" onclick="pageAjaxPrev()"><span>上一页</span></a>
 <a class="btn-lit" onclick="pageAjaxNext()"><span>下一页</span></a>
 <a class="btn-lit" onclick="pageAjaxEnd()"><span>尾页</span></a>
 <input type="text" name="pageTiao" id="pageTiao" style="width: 35px;height: 20px;margin-top:-2px;">
 <a onclick="tiao()" class="btn-lit"><span>跳转</span></a>
 <input type="hidden" name="maxys" id="maxys" value="">
 <input type="hidden" name="page" id="pageCurrent" value="">
 //hidden用来保存最大页和当前页
</div>

js代码

<script type="text/javascript">
 //清空最大页和当前页,保证能够多次搜索
 function on()
 {
 $('#pageCurrent').val(''); 
 $('#maxys').val('');
 }
 //首页
 function pageAjaxFirst()
 {
 $('#pageCurrent').val(1);
 searchResult();
 }
 //尾页
 function pageAjaxEnd()
 {
 var maxys = $('#maxys').val();
 $('#pageCurrent').val(maxys);
 searchResult();
 }
 //下一页
 function pageAjaxNext()
 {
 var maxys = $('#maxys').val();
 var page = $('#pageCurrent').val();
 $('#pageCurrent').val(parseInt(page) +1);
 if (page > maxys) {
 $('#pageCurrent').val(maxys);
 }
 searchResult();
 } 
 //上一页
 function pageAjaxPrev()
 {
 var maxys = $('#maxys').val();
 var page = $('#pageCurrent').val();
 $('#pageCurrent').val(parseInt(page) -1);
 if (page < 1) {
 $('#pageCurrent').val(1);
 }
 searchResult();
 } 
 //跳转页面
 function tiao ()
 {
 var maxys = $('#maxys').val();
 var now = $('#pageTiao').val();
 $('#pageCurrent').val(now);
 var page = $('#pageCurrent').val();
 if (page < 1) {
 $('#pageCurrent').val(1);
 }
 if (page > maxys) {
 $('#pageCurrent').val(maxys);
 }
 searchResult();

 }
 function searchResult()
 {

 var formData = $("#myPost").serialize();
 var caption = $("#caption"); 
 var html = '';

 $('#pageBar').remove();
 $.ajax({ 
 type:"get", 
 url:"/user/search/do_search", 
 data:formData, 
 success:success, 
 error: fail
 }); 

 function fail() {
 alert('查询条件有误。')
 }
 function success(search){
 if (search != null) {
 var obj = JSON.parse(search);
 var content = obj[0];
 var nowPage = obj[1];
 var total1 = obj[2];
 var allPage = obj[4];
 $.each(content, function (key, value) {
 html += '<tr class="sousuo"><td class="chk"><input value="" val="' + content[key]['user_id'] + '" type="checkbox" name="CheckBox[' + content[key]['user_id'] + ']" class="check-box" /></td> <td class="txt40 c">' + content[key]['user_id'] + '</td><td class="txt40 c"><a href="/user/user/user_info/user_id/' + content[key]['user_id'] +'" rel="external nofollow" ' + '"title="查看资料">'+ content[key]['account'] + '</a></td>' + '<td class="txt40 c">' + content[key]['nickname']+ '</td><td class="txt40 c">' + content[key]['sex'] + '</td><td class="txt80 c">' + content[key]['coin'] + '</td><td class="txt40 c">' + content[key]['tickets'] + '</td><td class="txt40 c">' + content[key]['gem'] + '</td><td class="txt40 c">VIP' + content[key]['vip_id'] + '</td><td class="txt40 c">' + content[key]['user_type'] + '</td> <td class="txt80 c">' + content[key]['register_platform'] + ' </td> <td class="txt80 c">' + content[key]['register_date'] + '</td> <td class="txt80 c">'+content[key]['last_login_time'] + '</td><td class="txt80 c">'+ content[key]['last_login_ip'] + '</td> <td class="txt80 c">'+ content[key]['game_login_times'] +'</td><td class="txt80 c">'+ content[key]['prohibit_flag'] + '</td><td class="icon"><a class="opt" title="编辑" href="/user/user/edit_user/user_id/' + content[key]['user_id'] + '}" rel="external nofollow" ><span class="icon-sprite icon-edit"></span></a></td></tr>';
 }); 
 $('.showTr').remove();
 $('.sousuo').remove();
 $('.xiaoshi').remove();

 $('.show').after(html);
 $('#maxys').val(allPage);
 $('#pageCurrent').val(nowPage);
 } else {
 $('.show').after('<tr>没有数据</tr>');
 } 
 $('#fenye').css('display','block');
 $('#pageAjax').html('页次:'+ nowPage + '/' + allPage +'每页22总数' + total1);
 } 
 }
</script>

文档

Ajax实现搜索功能的分页

本文实例为大家分享了Ajax实现搜索功能的分页,供大家参考,具体内容如下:之前只实现了搜索功能,但是并不能分页2333,所以在上篇的基础上修改实现分页(首页,上一页,下一页,尾页,跳转页面),脑袋瓜不够用,要记下来记下来。html代码;
推荐度:
标签: 搜索 功能 实现
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top