jquery+json实现的搜索加分页效果

下面是详细讲解“jquery+json实现的搜索加分页效果”的完整攻略。

一、概述

本文将通过示例代码，介绍如何使用jquery和json实现搜索及分页效果。通过这种方式，可以在页面无需刷新的情况下，动态地实现数据的加载、分页、筛选等操作。

二、实现步骤

1. 首先，在页面中引入jquery和bootstrap。可以使用以下链接，在head标签中插入以下代码：

<!-- jQuery文件的引入 -->  
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!-- bootstrap文件的引入 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

1. 创建一个div用于展示搜索结果。例如：

<div id="result"></div>

1. 创建一个input和一个button，用于输入搜索关键字和提交搜索请求。例如：

<input type="text" id="keyword" placeholder="输入关键字进行搜索...">
<button id="searchBtn" class="btn btn-primary">搜索</button>

1. 在jquery中监听button的点击事件，并发送ajax请求到后端获取数据。例如：

$(function() {
    $('#searchBtn').click(function() {
        var keyword = $('#keyword').val(); // 获取关键字
        getData(keyword); // 发送ajax请求并更新搜索结果
    });
});

function getData(keyword) {
    $.get('./data.json', {"keyword":keyword}, function(data){
        showData(data); // 展示搜索结果
        addPagination(data.length); // 添加分页
    }, 'json');
}

1. 实现展示搜索结果的函数，根据数据生成一个table，并将table添加到div中。例如：

function showData(data) {
    var html = "<table class='table table-striped table-bordered'><thead><tr><th>编号</th><th>名称</th><th>价格</th></tr></thead><tbody>";
    for (var i=0;i<data.length;i++) {
        html += "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].price + "</td></tr>";
    }
    html += "</tbody></table>";
    $('#result').html(html);
}

1. 实现分页的函数，根据数据的总量生成指定数量的分页的标签，并对其进行控制。例如：

var pageSize = 10;
var currentPage = 1;

function addPagination(totalNum) {
    var totalPage = Math.ceil(totalNum/pageSize);
    var pageHtml = '';
    for (var i=1;i<=totalPage;i++) {
        pageHtml += "<li><a href='javascript:void(0);'>" + i + "</a></li>";
    }

    $('#pagination').html(pageHtml);

    // 给每个分页标签绑定事件
    $('#pagination li').click(function() {
        var index = $(this).index();
        currentPage = index + 1;
        renderData(currentPage);
    });
}

1. 根据当前页码和pageSize，获取需要渲染的数据，并重新渲染搜索结果和分页标签。例如：

function renderData(currentPage) {
    if (currentPage < 1) {
        currentPage = 1;
    }
    var start = (currentPage - 1) * pageSize;
    var end = start + pageSize;
    $.get('./data.json', function(data){
        showData(data.slice(start, end));
    }, 'json');
    addPagination(data.length);
}

三、示例

以下是两个使用jquery+json实现搜索加分页效果的示例：

示例一

实现一个用户查询功能，用户可以通过搜索姓名或手机号码进行查询，并展示查询结果。同时，查询结果需要支持分页，每页展示10条数据。

具体实现见代码：https://codepen.io/anon/pen/PoYERBP

示例二

实现一个商品查询功能，用户可以通过搜索名称或价格区间进行查询，并展示查询结果。同时，查询结果需要支持分页，每页展示5条数据。

具体实现见代码：https://codepen.io/anon/pen/wWbJRN

四、总结

本文主要介绍了如何使用jquery+json实现搜索加分页效果，具体实现步骤见上述内容。在实现过程中，需要注意细节问题，例如分页标签的对齐方式、当前页码的控制等。通过学习本文，相信读者可以将类似的效果实现到自己的项目中，并提高用户体验。