📜  使用数据表分页

📅  最后修改于: 2021-11-25 04:20:55             🧑  作者: Mango

DataTables是一个现代 jQuery 插件,用于向网页的 HTML 表格添加交互式和高级控件。在本文中,我们将学习使用 DataTables 实现分页。其他功能包括排序和多列排序。

实现代码所需的预编译文件是

CSS:

JavaScript:

示例 1:以下示例演示使用 DataTables 的分页。在 HTML 部分,定义了一个包含学生数据的表格。 JavaScript 处理 DataTable 的初始化。

HTML



      
    
    
  
    
    
  
     
     
  
      
     

  

    

Pagination using jQuery Datatables

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
StudentIDStudentNameAgeGenderMarks Scored
ST1Prema35Female320
ST2Wincy36Female170
ST3Ashmita41Female860
ST4Kelina32Female433
ST5Satvik41male162
ST6William37Female372
ST7Chandan31male375
ST8David45male327
ST9Harry29male205
ST10Frost29male300
ST11Ginny31male560
ST12Flod45Female342
ST13Marshy23Female470
ST13Kennedy43male313
ST14Fiza31Female750
ST15Silva34male985
          


Javascript
$(document).ready(function() {
                
    /* marksscored is sorted in descending */
    $('#tableID').DataTable({
        order: [[ 4, 'desc' ]]
    });  
});


Javascript
$(document).ready(function() {
  
    /* To hide column 2 and 3 */
    $('#tableID').DataTable( {
        "columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 3 ],
                "visible": false
            }
        ]
    } );
} );


输出:

  • 执行前:

  • 执行后:

示例 2:应在上述 HTML 代码的 JavaScript 部分中实现以下代码片段。它演示了插件选项的设置,以按降序显示学生的分数。

Javascript

$(document).ready(function() {
                
    /* marksscored is sorted in descending */
    $('#tableID').DataTable({
        order: [[ 4, 'desc' ]]
    });  
});

输出:

示例 3:以下代码片段演示了隐藏上述学生表的某些选定列。在第一个 HTML 示例代码的 JavaScript 部分中包含以下代码段。

Javascript

$(document).ready(function() {
  
    /* To hide column 2 and 3 */
    $('#tableID').DataTable( {
        "columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 3 ],
                "visible": false
            }
        ]
    } );
} );

输出: