Table Sortable jQuery 插件可帮助您从 JSON 或 JavaScript 对象呈现可自定义的动态数据表，具有分页、实时过滤器和数据排序功能。

allway2

已于 2022-05-11 12:09:29 修改

阅读量336

点赞数

文章标签： javascript jquery json

于 2022-05-11 11:57:51 首次发布

本文链接：https://blog.csdn.net/allway2/article/details/124706871

版权

Table Sortable jQuery 插件可帮助您从 JSON 或 JavaScript 对象呈现可自定义的动态数据表，具有分页、实时过滤器和数据排序功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Table Sortable</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./bootstrap.min.css">
    <link rel="stylesheet" href="./styles.css">
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div class="page-container">
        <div class="container">
            <h1 class="display-4">Table Sortable</h1>
            <h5>A jquery plugin to sort and paginate data in table form</h5>
            <h6>
                <a href="story-latest.html">View full documentation</a>
            </h6>
            <div class="row mt-5 mb-3 align-items-center">
                <div class="col-md-5">
                    <button class="btn btn-primary btn-sm" id="rerender">Re-Render</button>
                    <button class="btn btn-primary btn-sm" id="distory">Distory</button>
                    <button class="btn btn-primary btn-sm" id="refresh">Refresh</button>
                </div>
                <div class="col-md-3">
                  <input type="text" class="form-control" placeholder="Search in table..." id="searchField">
                </div>
                <div class="col-md-2 text-right">
                  <span class="pr-3">Rows Per Page:</span>
                </div>
                <div class="col-md-2">
                    <div class="d-flex justify-content-end">
                        <select class="custom-select" name="rowsPerPage" id="changeRows">
                            <option value="1">1</option>
                            <option value="5" selected>5</option>
                            <option value="10">10</option>
                            <option value="15">15</option>
                        </select>
                    </div>
                </div>
            </div>
            <div id="root"></div>
            <div class="mt-4">
                <button class="btn btn-secondary" id="setPage2">Set Page 2</button>
            </div>
        </div>
    </div>
    <script src="./data.js"></script>
    <script src="./table-sortable.js"></script>
    <script>
        var table = $('#root').tableSortable({
            data: data,
            columns: columns,
            searchField: '#searchField',
            responsive: {
                1100: {
                    columns: {
                        formCode: 'Form Code',
                        formName: 'Form Name',
                    },
                },
            },
            rowsPerPage: 5,
            pagination: true,
            tableWillMount: function() {
                console.log('table will mount')
            },
            tableDidMount: function() {
                console.log('table did mount')
            },
            tableWillUpdate: function() {console.log('table will update')},
            tableDidUpdate: function() {console.log('table did update')},
            tableWillUnmount: function() {console.log('table will unmount')},
            tableDidUnmount: function() {console.log('table did unmount')},
            onPaginationChange: function(nextPage, setPage) {
                setPage(nextPage);
            }
        });

        $('#changeRows').on('change', function() {
            table.updateRowsPerPage(parseInt($(this).val(), 10));
        })

        $('#rerender').click(function() {
            table.refresh(true);
        })

        $('#distory').click(function() {
            table.distroy();
        })

        $('#refresh').click(function() {
            table.refresh();
        })

        $('#setPage2').click(function() {
            table.setPage(1);
        })
    </script>
</body>
</html>

如何使用它：

1. 将 jQuery JavaScript 库连同 JavaScripttable-sortable.js和 Stylesheet一起table-sortable.css导入到文档中。

<link rel="stylesheet" href="table-sortable.css" />
<script src="jquery.slim.min.js"></script>
<script src="table-sortable.js"></script>

2. 创建一个可用于过滤表的搜索字段。

<input type="text" placeholder="Search in table..." id="searchField">
<div class="table-sortable">
  Table will be rendered here
</div>

3. 定义您自己的表格数据和列名，如下所示。

var data = [
    {
        formCode: 531718,
        formName: 'Investment Form',
        fullName: 'Test User',
        appointmentDate: '13 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 531790,
        formName: 'Investment Form 2',
        fullName: 'Test User',
        appointmentDate: '12 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 531334,
        formName: 'Investment Form 3',
        fullName: 'Test User',
        appointmentDate: '10 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5317,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5318,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5319,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5320,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5321,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5322,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5323,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5324,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5325,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5326,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5327,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5328,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
    {
        formCode: 5329,
        formName: 'Investment Form 4',
        fullName: 'Test User',
        appointmentDate: '17 March, 2017',
        appointmentTime: '1:30PM',
        phone: '9876543210'
    },
]

var columns = {
    'formCode': 'Form Code',
    'formName': 'Form Name',
    'fullName': 'Full Name',
    'appointmentDate': 'Appointment Date',
    'appointmentTime': 'Appointment Time',
    'phone': 'Phone'
}

4. 初始化插件，在页面上渲染一个数据表。

var table = $('#table-sortable').tableSortable({
    data: data,
    columns: columns,
    rowsPerPage: 5,
    pagination: true
});

5. 启用下拉菜单以选择每页显示的表格行数。

<select name="rowsPerPage" id="changeRows">
  <option value="1">1</option>
  <option value="5" selected>5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

$('#changeRows').on('change', function() {
  table.up<a href="https://www.jqueryscript.net/time-clock/">date</a>RowsPerPage(parseInt($(this).val(), 10));
})

6. 使用 Ajax 更新数据。

var table = $('#table-sortable').tableSortable({
    data: [],
    columns: columns,
    rowsPerPage: 10,
    pagination: true,
});

$.get(/* url */, function(data) {
    // Push data into existing data
    table.setData(data, null, true);

    // or Set new data on table, columns is optional.
    table.setData(data, columns);
})

7. 启用/禁用所有列或特定列的排序。

var table = $('#table-sortable').tableSortable({
    ...
    sorting: true,
    ...
});

/* or on specific columns */

var table = $('#table-sortable').tableSortable({
    ...
    sorting: ['column1', 'column2'],
    ...
});

8. 根据视口宽度渲染不同的表格。它将最大宽度作为视口值。

var table = $('#table-sortable').tableSortable({
    ...
    responsive: {
        // It works for 571 - 1100 viewport width; (max-width: 1100px and min-width: 571px);
        1100: {
            // Other options
            columns: {
                formCode: 'Form Code',
                formName: 'Form Name',
            },
        },
        // It works for 0 - 570 viewport width; (max-width: 570px);
        570: {
            // Other options
            columns: {
                formName: 'Form Name',
            },
        }
    },
    ...
});

9.自定义插件的所有默认选项。

var table = $('#root').tableSortable({
    element: '',
    data: [],
    columns: {},
    sorting: true,
    pagination: true,
    paginationContainer: null,
    rowsPerPage: 10,
    formatCell: null,
    formatHeader: null,
    searchField: null, // selector of search field
    responsive: {}, // specify options for different screen sizes
    totalPages: 0,
    sortingIcons: {
        asc: '<span>▼</span>',
        desc: '<span>▲</span>',
    },
    nextText: '<span>Next</span>',
    prevText: '<span>Prev</span>',
    tableWillMount: () => {},
    tableDidMount: () => {},
    tableWillUpdate: () => {},
    tableDidUpdate: () => {},
    tableWillUnmount: () => {},
    tableDidUnmount: () => {},
    onPaginationChange: null,
})

10. API 方法。

// It will update the table, if you have updated options they will be applied.
table.refresh(); 

// It will distroy and create table from start.
table.refresh(true); 

// Destroy the table.
table.distroy();

// Get table data.
table.getData();

// Set new data and columns on table
table.setData(data, columns /* optional */);

// Add data in existing data
table.setData(partialData, null, true);

// Get data on the current page
table.getCurrentPageData();

// Update rows per page dynamically. 
table.updateRowsPerPage(20);

GitHub - ravid7000/table-sortable: A jquery plugin to sort and paginate data in table form.

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Table Sortable jQuery 插件可帮助您从 JSON 或 JavaScript 对象呈现可自定义的动态数据表，具有分页、实时过滤器和数据排序功能。

Table Sortable jQuery 插件可帮助您从 JSON 或 JavaScript 对象呈现可自定义的动态数据表，具有分页、实时过滤器和数据排序功能。如何使用它：1. 将 jQuery JavaScript 库连同 JavaScripttable-sortable.js和 Stylesheet一起table-sortable.css导入到文档中。<link rel="stylesheet" href="table-sortable.css" /><script
复制链接

扫一扫