jQuery Pagination Table Plugin

Add-ons

2026-07-26 03:52 3 次浏览 • 0 次下载 12.5KB

Plugin Description: Supports alternating row styles, highlighting selected rows, and changing the number of items displayed per page. Data can come from various sources and formats (HTML, JS, or ajax).

Last Updated: 2017/12/22 1:50:54 PM

Changelog:

1. If the page number input field is visible, its page number will be updated accordingly when the table data changes.

2. If the number of items displayed per page is configurable, changing this number will refresh the table with the data from the first page.

For usage examples, see index.js in the compressed package.

The following are the available plugin parameters:

{
    'showInfo': true,
    /* Whether to display page information */ 'tbodyRow': {
        'zebra': true,
        /* Zebra striping */ 'selected': false,
        /* Selected row */ 'hover': false,
        /* Row hover effect */ 'write': function(d) { /* Method for generating each row of table data */
            var r = '<tr>'
            $.each(d, function(i, val) {
                r += '<td>' + val + '</td>';
            });
            r += '</tr>';
            return r;
        }
    },
    'paginate': {
        'enabled': true,
        /* Whether to enable pagination */ 'visibleGo': false,
        /* Whether to enable direct navigation to a specific page */ 'type': 'numbers',
        /* Default button style (numbers: numeric buttons only; updown: adds previous and next page buttons; full: adds first and last page buttons) */ 'displayLen': 10,
        /* Number of items displayed per page */ 'currentPage': 1,
        /* Current page number (initial page number) */ 'changeDisplayLen': false,
        /* Change the number of items displayed per page */ 'displayLenMenu': [10, 20, 30, 50] /* Available options when changing the number of items displayed per page */
    },
    'tbodyData': {
        'enabled': false,
        /* Whether to pass in table data */ 'source': [] /* Table data to be passed in */
    },
    'serverSide': false,
    /* Whether to retrieve data from the server */ /* ajax parameters */ 'ajaxParam': {
        'url': '',
        /* URL address */ 'type': 'GET',
        /* ajax request method */ 'dataType': 'json',
        /* ajax data transmission format */ 'jsonp': null,
        /* When dataType is jsonp, the parameter name passed to the request handler or page to obtain the JSONP callback function name */ 'jsonpCallback': null,
        /* Custom JSONP callback function name when dataType is jsonp */ 'data': {},
        /* Data to be sent to the server */ 'timeout': 10 * 1000 /* Maximum response time limit, in milliseconds */
    },
    'errFlag': false,
    /* Error flag: false means no error, true means an error occurred */ 'errMsg': '',
    /* Error message */ 'sendDataHandle': function(d) {
        return d;
    },
    /* Data preprocessing method before sending data to the server */ 'backDataHandle': function(d) {
        return d;
    },
    /* Preprocess data received from the server or passed in through JS */ 'beforeShow': function() {},
    /* Additional processing event before display */ 'afterShow': function() {} /* Additional processing event after display */
}