jquery paging plug-in usage

With the continuous development of the Internet, it is becoming more and more common for websites to display large amounts of data. When displaying this data, paging operations are often required. In order to facilitate developers to implement the paging function, jQuery provides a powerful paging plug-in-jQuery paging plug-in.

The jQuery paging plug-in is a lightweight, easy-to-use plug-in that is used to quickly implement the paging function of web page data. It can help us easily switch data, and at the same time allow users to browse data more conveniently. Below, we will introduce the specific usage of jQuery paging plug-in.

1. Plug-in introduction

First of all, before using the jQuery paging plug-in, we need to introduce the jQuery file and plug-in file. The jQuery paging plug-in can be introduced into the web page through the following code:

<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jQuery-Pagination/1.4.2/jquery.pagination.min.js"></script>

2. HTML code

Next, prepare the data that needs to be paginated in our web page and wrap them in In a div tag:

<div id="pageContent">
    <div>第一页数据……</div>
    <div>第二页数据……</div>
    <div>第三页数据……</div>
    <div>第四页数据……</div>
    <div>第五页数据……</div>
    <div>第六页数据……</div>
</div>

3. JavaScript code

Then, in the javascript code, we can use the following code to initialize the paging plug-in:

$('#pageContent').pagination({
    totalPage: 6, // 数据总页数
    current: 1, // 当前页码
    displayPage: 5, // 显示页码数量
    mode: 'fixed', // 分页模式，可选值为'fixed'或'scroll'
    callback: function (page) { // 回调函数，每当用户点击页码时被触发
        // 获取当前页码
        console.log(page);
        // 实现数据切换
    }
});

Here, we You need to specify parameters such as the total number of data pages, current page number, number of displayed page numbers, and paging mode. Among them, the callback function is triggered when the user clicks on the page number, and the data switching function can be called.

4. Style setting

Finally, we can set the style of the paging plug-in to better adapt to the needs of the web page. For example, you can modify the default style through the following code:

.pagination {
    margin-top: 10px;
    text-align: center;
}
.pagination li {
    display: inline-block;
    border: 1px solid #ccc;
    margin-right: 5px;
    padding: 5px 10px;
    transition: all .3s ease;
}
.pagination li.active {
    background-color: #f00;
    color: #fff;
    border-color: #f00;
    cursor: default;
}

Here, we use CSS to set the margins, center display, page number style, etc. of the paging plug-in.

Summary:

By using the jQuery paging plug-in, we can easily realize paging display and switching of web page data. During use, we need to specify parameters such as the total number of pages of data, the current page number, the number of displayed page numbers, and the callback function. At the same time, the plug-in style can be modified through CSS.

The above is the detailed content of jquery paging plug-in usage. For more information, please follow other related articles on the PHP Chinese website!