Detailed explanation of the usage of jQuery plug-in datatables and how to implement paging code-JS Tutorial-php.cn

DataTables is a jQuery table plug-in.

Explanation with examples

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 double-clicked row changes color. 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. Coding:
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   *  
      
 
 
 }

Copy after login

Description of the above code: This code is mainly divided into two parts. The first part is The declaration of jquery datatables,

Copy after login

Description of the above code: This code is the declaration of dialog, and the declaration of datatables is operated by add, edit, and delete.

4. Paging implementation

Introducing CSS files and JS files

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

Copy after login

For dataTables, tables It must be explained through thead and tbody, as shown below,

Copy after login

If there is no thead, an error will be reported.

bPaginate: Whether to paginate, the default is true, pagination
iDisplayLength: Number of lines per page, default number per page: 10
sPaginationType: Pagination style, supports two built-in methods , two_button and full_numbers, two_button is used by default.
bLengthChange: Whether to allow the user to select the number of rows per page after paging through a drop-down list. The number of rows is 10, 25, 50, 100. This setting requires bPaginate support. Defaults to true.
bFilter: Enable or disable data filtering, the default is true. Note that if you use the filtering function but want to turn off the default filtering input box, you should use sDom
bInfo: to allow or prohibit table information The display, the default is true, displays information.

#The simplest way to use it is zero configuration.

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

Copy after login

The above is the detailed content of Detailed explanation of the usage of jQuery plug-in datatables and how to implement paging code. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

datatables jquery how

source：php.cn

Previous article：What are jQuery datatables? How to use datatables? Next article：Detailed explanation of example code for traversing cell content with js and jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn