Layui Pagination: Passing Parameters for Dynamic Data Loading

1 year ago
Liam
2 minutes

The Layui pagination component is a powerful tool for handling large datasets by dividing them into manageable pages. To effectively control the data displayed and enable dynamic loading, it’s essential to understand how to pass parameters like limit (number of data entries per page) and curr (current page number).

Configuring Pagination Parameters

When initializing the Layui pagination component using laypage.render(), you can specify these parameters within the configuration object:

// Initialize the pagination component
layui.use('laypage', function(){
    var laypage = layui.laypage;
    
    laypage.render({
        elem: 'demo', // ID of the pagination container
        count: 100, // Total number of data items
        limit: 10, // Number of items displayed per page
        curr: 1, // Current page number
        jump: function(obj, first){
            // obj contains all current pagination parameters (e.g., obj.curr, obj.limit)
            // Use AJAX to fetch data for the corresponding page
            // Example AJAX call (conceptual):
            /*
            $.ajax({
                url: '/api/data',
                method: 'GET',
                data: {
                    page: obj.curr,
                    pageSize: obj.limit
                },
                success: function(res) {
                    // Render data to your table/list
                }
            });
            */
        }
    });
});

Utilizing Parameters in the jump Callback

The jump callback function is crucial for dynamic data loading. It is triggered whenever the page number or page size changes. The obj parameter passed to this function contains the current pagination state, including obj.curr (current page number) and obj.limit (number of items per page).

Inside the jump callback, you can use these values to make an AJAX request to your server, fetching only the data relevant to the current page. This approach ensures efficient data retrieval and a smooth user experience, as only necessary data is loaded.

By properly configuring limit and curr and utilizing them within the jump callback, you can implement robust and dynamic pagination for your Layui-based applications.

bannerAds