Bagaimana untuk melaksanakan paparan paging jadual excel dengan jquery

Dalam era maklumat hari ini, hamparan telah menjadi salah satu alat yang sangat diperlukan dalam semua bidang kehidupan. Dalam hamparan ini, kerana jumlah data yang disimpan terlalu besar, untuk memudahkan penggunaan pengguna, kami biasanya menggunakan halaman untuk memaparkan dan menanyakan data. Jadi, bagaimana untuk merealisasikan paparan paging jadual Excel dengan cepat melalui jQuery? Artikel ini akan menerangkannya kepada anda secara terperinci.

1. Pengenalan pemalam paging

Untuk merealisasikan fungsi paging, kita perlu memperkenalkan pemalam jQuery yang menyokong paparan paging Di sini kita memilih untuk menggunakan pemalam jPaginator. Perkenalkan pemalam jPaginator dengan cara berikut:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jPaginator.js"></script>
<link rel="stylesheet" href="path/to/jPaginator.css" />

Antaranya, fail CSS jPaginator amat diperlukan kerana ia adalah fail gaya pemalam ini.

2. Format data jadual

Sebelum kami memaparkan jadual Excel, kami perlu menyimpan data jadual dalam format JSON dan memformatkannya. Berikut ialah contoh format data jadual:

{
    "total": 50, 
    "data": [
        {"Name": "张三", "Age": "18", "Sex": "男", "Address": "湖南长沙"}, 
        {"Name": "李四", "Age": "19", "Sex": "女", "Address": "广东深圳"}, 
        {"Name": "王五", "Age": "20", "Sex": "男", "Address": "北京朝阳"}, 
        {"Name": "赵六", "Age": "21", "Sex": "女", "Address": "上海浦东"}, 
        {"Name": "刘七", "Age": "22", "Sex": "男", "Address": "重庆江北"},
        ...
    ]
}

medan total digunakan untuk menyimpan jumlah data dan medan data ialah tatasusunan yang menyimpan data bernombor.

3. Permulaan pemalam paging

Selepas memperkenalkan kod pemalam jPaginator, kami perlu memulakannya supaya ia boleh sepadan dengan data jadual kami. Kod permulaan adalah seperti berikut:

// 定义分页数据，total为数据总量，perPage为每页显示的数量
var paginationData = {
    total: 0,
    perPage: 10,
    currentPage: 1,
    pageRange: 5,
    onPageClicked: function (pageIndex, event) {
        // 在这里调用ajax函数获取分页数据并更新表格
    }
};

// 调用jPaginator
$(".pagination").jPaginator(paginationData);

Seterusnya, kita perlu menetapkan kaedah panggilan ajax dalam kaedah onPageClicked untuk mendapatkan data bernombor. Di sini kami menggunakan kaedah $.ajax() jQuery untuk membuat panggilan dan menghantar data paging ke perkhidmatan latar belakang.

onPageClicked: function (pageIndex, event) {
    $.ajax({
        url: "http://localhost:8000/getPageData",
        dataType: "json",
        type: "GET",
        data: {
            page: pageIndex,  // 当前页码
            perPage: this.options.perPage  // 每页显示的数量
        },
        success: function (data) {
            showPageData(data);  // 更新表格数据
        }
    });
}

4. Kemas kini data jadual

Selepas berjaya mendapatkan data paging, kami perlu mengemas kininya ke dalam jadual. Di sini kami menggunakan kod berikut untuk membina kod HTML jadual:

function buildTableHtml(data) {
    var html = "<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>住址</th></tr></thead><tbody>";
    for (var i = 0, length = data.length; i < length; i++) {
        html += "<tr>" +
                "<td>" + data[i].Name + "</td>" +
                "<td>" + data[i].Age + "</td>" +
                "<td>" + data[i].Sex + "</td>" +
                "<td>" + data[i].Address + "</td>" +
                "</tr>";
    }
    html += "</tbody></table>";
    return html;
}

Selepas membina kod HTML jadual, kami perlu menambahkannya pada halaman. Gunakan kod berikut untuk mengemas kini jadual:

function showPageData(data) {
    var tableHtml = buildTableHtml(data);
    $(".table-wrapper").html(tableHtml);
}

5. Ringkasan

Melalui pelaksanaan kod di atas, kami boleh menggunakan jQuery dengan pantas untuk merealisasikan fungsi paparan halaman jadual Excel. Antaranya, penggunaan jPaginator boleh melaksanakan fungsi paging dengan cepat, dan penggunaan kaedah $.ajax() jQuery boleh mendapatkan data paging dengan cepat. Saya berharap kandungan yang diperkenalkan dalam artikel ini dapat membantu majoriti pembangun dalam proses pembangunan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paparan paging jadual excel dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!