本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持悠久资源网。
您可能感兴趣的文章:
- jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）
- Yii框架结合sphinx,Ajax实现搜索分页功能示例
- ajax结合豆瓣搜索结果进行分页完整代码
- Ajax搜索结果页面下方的分页按钮的生成
