前端分页(详细步骤)

一、思路

1.设置全局变量，当前页，总页数，总条数，每页显示多少条，所有页数据，当前页数据，start（总数据开始截取位置）、end（总数据结束截取位置）

2.调用接口，请求到所有的数据后，改变相应的全局变量

3.通过对总数据进行filter过滤得到当前页数据，然后把数据渲染到表格上，

4.其他操作：如页码的点击、左右箭头的点击都会改变当前页的内容，就是改变相应全局变量，然后重新过滤当前页数据，然后进渲染到页面上

二、具体步骤

1.定义变量

//当前页
let nowPage = 1

// 每页显示多少条
let pageCount = 2

// 总页数
let totalPage
    
// 总条数
let totalNumber

// 总内容
let totalArr

// 当前页内容
let pageArr

//总数据过滤开始的位置
let start

//总数据过滤结束的位置
let end

//判断搜索还是展现数据（不用管）
let flag = true

2.调用接口

//基于jQuery
$(function() {
    get_cxc_table_data()
})

// 请求数据
function get_cxc_table_data() {
    flag = true
    $.ajax({
        url: BASEURL + TEAMCONTRACTLIST,
        type: 'post',
        success(res) {
    	   //改变相应的全局变量
           //总条数
            totalNumber = res.data.length
            //所有数据
            totalArr = res.data
            //渲染表格的方法
            addTable(totalArr, nowPage, pageCount)
             // 创建页数的方法
            addPage(totalArr.length)
        }
    })
}

3.渲染表格

// 动态添加到table表格中
//@params arr:渲染的数据
//@params now:当前页
//@params count:每页显示几条数据
function addTable(arr, now, count) {
    // 将之前的表格清空
    $('#teamList').html('')

	//渲染的字符串
    let tr = ''
	//过滤总数据开始的位置和结束的位置
	//规律
	//（当前页数-1）*每页显示几条数据<**当前页的数据**<当前页*每页显示几条数据
    start = (now - 1) * count
    end = now * count

    // 过滤中数据得到当前页数据 
    pageArr = arr.filter((item, index) => {
        return index >= start && index < end
    })
    //循环当前页的数据到表格中
    pageArr.forEach(item => {
        console.log(item);
        tr += `
            <tr>
            <td><a href="lookfamilydoctor.html?tid=${item.d_id}" style="color: #1D65A6;">${item.d_name}						   </a></td>
            <td>${item.d_sex}</td>
            <td>${item.d_sid}</td>
            <td>${item.d_tel}</td>
            <td>${item.d_join}</td>
            <td>${item.d_feature}</td>
            <td>
                <button data-id=${item.d_id} type="button" class="btn btn-danger cxc_xiugai"><span
                        class="iconfont icon-xiugai">修改</span></button>
                <button data-id=${item.d_id} type="button" class="btn btn-warning shanchuzwy" ><span
                        class="iconfont icon-shanchu">删除</span></button>
            </td>
        </tr>
        `
    });
    $('#teamList').append(tr)
}

4.动态创建页数

// 动态创建页数
function addPage(length) {
    // 将之前页码等清空
    $('.zwy_par').html('')
    //总页数
    totalPage = Math.ceil(length / pageCount)

    // 添加总页数
    let allPage = `
        <div id='zwylb4' class='zwy_par'>
        <div id="zwylb1">共有${totalNumber}条数据</div>
    </div>
        `
    $('#zwylb2').before(allPage)

    // 将之前的清空
    $('#zwylb3').html('')

    // 添加左箭头
    let str
    str = `
    <button type="button"  class="btn btn-default cxc_left_button" ;background-color: #fff;">
                                                < </button>
    `
     // 添加页码
    for (let i = 1; i <= totalPage; i++) {
        str += `
         <button type="button" class="btn btn-default  cxc_button">${i}</button>
        `
    }
    // 添加右箭头
    str += `
    <button type="button" class="btn btn-default cxc_right_button" ;">></button>
    `
    $('#zwylb3').append(str)
}

5.其他方法

点击改变相应的全局变量，重新渲染就可以了

// 每页显示多少条
$('.zwywb_child').on('change', '#zwylb2', function() {
    console.log(this);
    pageCount = $('#zwylb2>option:selected').val()
    get_cxc_table_data()
})

//左右箭头的点击，做越界判断
$(document).on('click', '.cxc_left_button', function() {
    if (nowPage > 1) {
        nowPage--
        get_cxc_table_data()
    }
})

$(document).on('click', '.cxc_right_button', function() {
    if (nowPage < totalPage) {
        nowPage++
        get_cxc_table_data()
    }
})

// 页码的点击
$(document).on('click', '.cxc_button', function() {
    nowPage = $(this).text()
    $('#zwlb4').val($(this).text())
    if (flag == true) {
        get_cxc_table_data()
    } else {
        searchDoctor()
    }
})

// 输入跳转到多少页回车跳转
$('#zwlb4').on('change', function(e) {
    if ($('#zwlb4').val() <= totalPage && $('#zwlb4').val() > 0) {
        nowPage = $('#zwlb4').val()
        get_cxc_table_data()
    }
})