How to apply the jQuery plug-in datatables for table manipulation

This time I will show you how to apply the jQuery plug-in datatables for operating tables, and what are the application Notes of the plug-in datatables for jQuery operating tables. The following is a practical case, let's take a look.

1. Introduction to Datatables

DataTables is a jQuery table plug-in. This is a highly flexible tool based on progressive enhancements that will add advanced interactive controls and support for any HTML form. Main features:

• Automatic paging processing

• ##Instant formData filtering

• Data sorting and Data typeAutomatic detection

• Automatic processing Column width

• Can be customized through CSS style

• Supports hidden columns

• Ease of use

• Scalability and flexibility

• Internationalization

• Dynamic creation of tables

• Free ’s

2. How to use When doing the backend, there are no artists and front-end engineers to cooperate with you in making the page. In order to display the data and have certain For aesthetics, we can use jQuery's DataTables plug-in to help us complete the task
1. The default configuration of DataTables

 $(document).ready(function() { 
$('#example').dataTable(); 
} );

2. Some basic attribute configurations of DataTables

 "bPaginate": true, //翻页功能 
"bLengthChange": true, //改变每页显示数据数量 
"bFilter": true, //过滤功能 
"bSort": false, //排序功能 
"bInfo": true,//页脚信息 
"bAutoWidth": true//自动宽度

3. Data sorting

$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} );

Start from column 0, end with column 0 4 columns in reverse order

4. Hide some columns

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} );

5.Internationalization

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每页显示 _MENU_ 条记录", 
"sZeroRecords": "抱歉， 没有找到", 
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", 
"sInfoEmpty": "没有数据", 
"sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
"oPaginate": { 
"sFirst": "首页", 
"sPrevious": "前一页", 
"sNext": "后一页", 
"sLast": "尾页" 
}, 
"sZeroRecords": "没有检索到数据", 
"sProcessing": "" 
} 
} ); 
} );

6. Sorting function:

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );

7. Data acquisition supports 4 types: as follows

• •DOM Document Data

• ##• Javascript array js array

• ##•Ajax source Ajax request data

• •Server side processing Server-side data

3.

Example explanation

1. Requirements: As shown in the figure below, add, edit, and delete the contents of datatables.

2. Analysis: Add function---click the add button to pop up a dialog box to add new content.

Editing function---Click datatables to select a row. The row changes color, which means it has been selected. Click the edit button to pop up the dialog. The content in this dialog is the content of the row we selected. If no row is selected and the edit button is clicked, the dialog will not pop up. When a row in datatables is double-clicked, a dialog will also pop up, and the color of the double-clicked row will change. The content in the dialog is the content of the row we double-clicked.

Deletion function---click datatables to select a row, click the delete button, and a warning box will pop up, prompting you whether to delete the selected content. When nothing is selected, clicking the delete button will not pop up a warning box and the content will not be deleted.

3. Encoding:
Attributes//Name

 //声明jquery datatables 
    
      
        
        
        
     
   
   
    .....//datatables内容，此处省略 
   
Name 
       
Value 
       
DisplayOrder 
      
 
//添加按钮 
//编辑按钮 
//删除按钮 
//声明dialog,异步更新 
  @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{ 
  UpdateTargetId = "d_Attributes", 
  OnSuccess = "dialogClose", 
  HttpMethod = "Post", 
})) 
  { 
    
 
       
                      
           
           
         
         
           
           
         
           
          
           
         
         
           
         
       
    
Name
 
           *
Value
 
            *
DisplayOrder
 
            *
 
             
             
          
 
  } 

上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，

；第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。所需js的代码：

上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。
添加功能效果图

 

编辑功能效果图：

               

删除效果图：

 

到此，功能已经全部实现，所需的代码也已经贴出。
4、分页实现

引入CSS文件和JS文件

 
 
 
  
 -------------------------------------------------------------------------- 
  
-----------最简单的方式： 
 $(document).ready(function() { 
 $("#example").dataTable(); 
}); 
  
----------也可以自己定义各属性： 

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，

                                                                                                                                                      

 如果没有 thead 将会报错。

• bPaginate: 是否分页，默认为 true，分页

• iDisplayLength : 每页的行数，每页默认数量:10

• sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。

• bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。

• bFilter: 启用或禁止数据过滤，默认为 true。 注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom

• bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。

最为简单的使用方式，就是零配置的方式。

/*
 * Example init
 */
$(document).ready(function(){
  $('#example').dataTable()

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery动画效果图片轮播实现（附代码）

jquery拖拽效果实现方法

The above is the detailed content of How to apply the jQuery plug-in datatables for table manipulation. For more information, please follow other related articles on the PHP Chinese website!

Rendering engine	Browser	Platform(s)	Engine version	CSS grade
Trident	Internet Explorer 4.0	Win 95+	4	X