jQuery写ajax(课程管理系统分页+课程名称查询)

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

页面布局：

     <div>
    <table class="tab">
        <caption>课程管理</caption>
        <button class="chax">查询</button>
        <thead>
            <tr>
                <th>课程编号</th>
                <th>课程名称</th>
                <th>课时</th>
                <th>年级</th>

            </tr>
        </thead>
        <tbody class="tbody"></tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <button class="one">首页</button>
                    <button class="on">上一页</button>
                    <span class="pageIndex"></span>
                    <span>/</span>
                    <span class="pageAll"></span>
                    <button class="next">下一页</button>
                    <button class="last">尾页</button>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

<div class="box1">
     查询框
    <ul>
        <li>
            查询课程名称：
            <input type="text" id="subjectName">
        </li>
        <li>
            <button class="queding">确定</button>
            <button class="cancel">取消</button>
        </li>
    </ul>
</div>
   

页面样式：

   <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    th,
    td {
        border: 1px solid black;
        text-align: center;
    }

    table {
        border: 1px solid black;
        width: 800px;
        border-collapse: collapse;
    }

    .box1 {
        display: none;
    }
    ul{
        width: 280px;
        border: 1px solid black;
        text-align: center;
        margin-top: 20px;
        background-color: pink;
    }
    li{
        line-height: 30px;
    }
</style>

let pageIndex = 1 页码

let pageAll = 1 总页码

let pageSize = 1 每一页有多少条数据

结构赋值法，刨析出来a里面的count和data, count为数据总数，data表示五条数据 let { count, data } = a

总页码=数据总数/5

因为页面不一定可以整除5，可能会有余数，这时候需要数学方法 Math.ceil()向上取整

pageAll = Math.ceil(count / 5)

$(".pageIndex").html(pageIndex)

$(".pageAll").html(pageAll)

     let pageIndex = 1
     页码
    let pageAll = 1
    总页码
    let pageSize = 1
    每一页有多少条数据
    function fn() {
    
        $(".tbody").html("")
        $.get("https://www.bingjs.com:8001/Subject/GetSubjectsConditionPages", {
            pageIndex: pageIndex,
            pageSize: 5,
            SubjectName: $("#subjectName").val(),
        }, function (a) {
        结构赋值法，刨析出来a里面的count和data,
        count为数据总数，data表示五条数据
          let { count, data } = a
          遍历data，并根据data创建DOM树
            data.forEach(key => {
                let tr = $(`
                <tr>
                    <td>${key.SubjectId}</td>
                    <td>${key.SubjectName}</td>
                    <td>${key.ClassHour}</td>
                    <td>${key.GradeId}</td>
                  
                    </tr>
                `
                )
                $(".tbody").append(tr)
            });
            总页码=数据总数/5，
            因为页面不一定可以整除5，可能会有余数，这时候需要数学方法
            Math.ceil()向上取整
            pageAll = Math.ceil(count / 5)
            $(".pageIndex").html(pageIndex)
            $(".pageAll").html(pageAll)
            //调用查询
            fa()
        })
    }
    fn()
    
    

每次点击完再次调用fn()是因为点击之后数据无法刷新，但是再次调用fn()则会使数据刷新

fn()第一行代码写这个$(".tbody").html("")是因为再次调用fn(),数据会进行累加，调用一次累加五条，所以需要在调用的时候清除body内容

      // 首页
    $(".one").click(function () {
    点击首页，页码等于1，并再次调用fn()，使得数据刷新
        pageIndex = 1
        fn()
    })

    // 尾页
    $(".last").click(function () {
        pageIndex = pageAll
        fn()
    })
    //下一页
    $(".next").click(function () {
        if (pageIndex++ >= pageAll) {
            pageIndex = pageAll
        }
        fn()
    })
    //上一页
    $(".on").click(function () {
        if (pageIndex-- <= 1) {
            pageIndex = 1
        }
        fn()
    })
    
    
      // 查询
    function fa() {
    点击查询按钮，隐藏的查询框出现
        $(".chax").click(function () {
            $(".box1").show()
            点击确定按钮
            $(".queding").click(function () {
            令页码等于1，再次调用函数，因为查询课程名称接口和分页接口一样，所以直接把分页和课程查询用同一个接口写
                pageIndex = 1
                fn()
            })
       })
    }
    

点击取消按钮，查询框隐藏

      // 取消
    $(".cancel").click(function () {
        $(".box1").hide()
    })