Home Web Front-end JS Tutorial Introduction to jquery plug-in datatables attributes and detailed explanations of creating paging and sorting examples

Introduction to jquery plug-in datatables attributes and detailed explanations of creating paging and sorting examples

Jul 22, 2017 am 09:28 AM
datatables jquery introduce

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.

Usage:

First look at the following code:


<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
Copy after login

Introduce js and css files into the above code. It can be copied in the demo. Pay attention to the path address.

Then let’s take a look at the following code:


<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(&#39;#example&#39;).dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true,  //使用jqueryui 。我用的时候显示的不是很好
"sPaginationType": "full_numbers"//分页
} );
} );
</script>

</head>
<body id="dt_example">//此处为body的id

<p id="container" align="center">//*p 里是 table ,table包括thead等,最好按此格式写*
<h1>物品种类管理</h1>
<p id="demo">
<table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>

<tr class="gradeX">//此处可以是gradeA ,gradeX 等,但是gradeB 隔行换色 效果很好
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>  
</table>
</p>    
</p>
Copy after login

The above will create the effect as shown in the picture, paging. Sort. etc.

Finally, let’s talk about each attribute (the main location to add)


//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {//加载
    //"bPaginate": true,//分页按钮
    //"bLengthChange": true,//每行显示记录数
    //"bFilter": true,//搜索栏
    //"bSort": true,//排序
    //"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
    //"bAutoWidth": true } );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {
    //"aaSorting": [[ 4, "desc" ]]//给列表排序 ,第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
  //} );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {
    //"aoColumns": [ 
    //  /* Engine */  null, //默认
    //  /* Browser */ null,
    //  /* Platform */ { "bSearchable": false, //不可参与搜索
    //           "bVisible":  false },//不可见
    //  /* Version */ { "bVisible":  false },//不可见
    //  /* Grade */  null
    //] } );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable({
  //});
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {
    //"sDom": &#39;<"top"i>rt<"bottom"flp<"clear">&#39;//这段是自定义布局没搞明白挺复杂的。  * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - p elements* <"class" and > - p with a class  * Examples: <"wrapper"flipt>, <lf<t>ip>

  //} );
//} );

//$(document).ready(function() {
//  $(&#39;#example&#39;).dataTable( {
  //  "bStateSave": true //保存状态到cookie *************** 很重要 , 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
  //} );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( {
    //"sPaginationType": "full_numbers" //分页,一共两种样式 另一种为two_button 是datatables默认
  //} );
//} );

//$(document).ready(function() {
  //$(&#39;#example&#39;).dataTable( { //分页信息 不是很难理解。
    //"oLanguage": {
      //"sLengthMenu": "Display _MENU_ records per page",
      //"sZeroRecords": "Nothing found - sorry",
      //"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
      //"sInfoEmtpy": "Showing 0 to 0 of 0 records",
      //"sInfoFiltered": "(filtered from _MAX_ total records)"
    //}
  //} );
//} )

$(document).ready(function() {
  oTable = $(&#39;#example&#39;).dataTable({
    "bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css
    "sPaginationType": "full_numbers"
  });
} );
Copy after login

The default language is English, of course it can be internationalized:
"sUrl": "/SSS/dataTables/de_DE.txt" Just add an internationalized file. The name can be anything as long as the path is correct. The content of the internationalization file I wrote is as follows, which can be directly copied to txt for use.


{
"sProcessing": "Bitte warten...",
"sLengthMenu": "显示_MENU_条 ",
"sZeroRecords": "没有您要搜索的内容",
"sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst":  "第一页",
"sPrevious": " 上一页 ",
"sNext":   " 下一页 ",
"sLast":   " 最后一页 "
}
}
Copy after login

The above is the detailed content of Introduction to jquery plug-in datatables attributes and detailed explanations of creating paging and sorting examples. For more information, please follow other related articles on the PHP Chinese website!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

What is Dogecoin What is Dogecoin Apr 01, 2024 pm 04:46 PM

Dogecoin is a cryptocurrency created based on Internet memes, with no fixed supply cap, fast transaction times, low transaction fees, and a large meme community. Uses include small transactions, tips, and charitable donations. However, its unlimited supply, market volatility, and status as a joke coin also bring risks and concerns. What is Dogecoin? Dogecoin is a cryptocurrency created based on internet memes and jokes. Origin and History: Dogecoin was created in December 2013 by two software engineers, Billy Markus and Jackson Palmer. Inspired by the then-popular "Doge" meme, a comical photo featuring a Shiba Inu with broken English. Features and Benefits: Unlimited Supply: Unlike other cryptocurrencies such as Bitcoin

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Introduction to the eighth color weapon of Neon Abyss Introduction to the eighth color weapon of Neon Abyss Mar 31, 2024 pm 03:51 PM

The eighth color is a weapon in Neon Abyss. Many players want to know about the ballistics of the eighth color of the weapon and how to play with the weapon strength. So let’s take a look at the detailed guide to Neon Abyss’ eighth color weapon trajectory, weapon strength, and weapon gameplay. Neon Abyss Color 8 Detailed Guide Weapon Introduction: The Wizard’s Secret Weapon! Weapon attack speed: Normal Weapon strength: Moderate Weapon gameplay: The attack method of the eighth color is three single-target attacks and then launches a ray. Ballistic display:

Introduction to the online score checking platform (convenient and fast score query tool) Introduction to the online score checking platform (convenient and fast score query tool) Apr 30, 2024 pm 08:19 PM

A fast score query tool provides students and parents with more convenience. With the development of the Internet, more and more educational institutions and schools have begun to provide online score check services. To allow you to easily keep track of your child's academic progress, this article will introduce several commonly used online score checking platforms. 1. Convenience - Parents can check their children's test scores anytime and anywhere through the online score checking platform. Parents can conveniently check their children's test scores at any time by logging in to the corresponding online score checking platform on a computer or mobile phone. As long as there is an Internet connection, whether at work or when going out, parents can keep abreast of their children's learning status and provide targeted guidance and help to their children. 2. Multiple functions - in addition to score query, it also provides information such as course schedules and exam arrangements. Many online searches are available.

Detailed introduction of Samsung S24ai functions Detailed introduction of Samsung S24ai functions Jun 24, 2024 am 11:18 AM

2024 is the first year of AI mobile phones. More and more mobile phones integrate multiple AI functions. Empowered by AI smart technology, our mobile phones can be used more efficiently and conveniently. Recently, the Galaxy S24 series released at the beginning of the year has once again improved its generative AI experience. Let’s take a look at the detailed function introduction below. 1. Generative AI deeply empowers Samsung Galaxy S24 series, which is empowered by Galaxy AI and brings many intelligent applications. These functions are deeply integrated with Samsung One UI6.1, allowing users to have a convenient intelligent experience at any time, significantly improving the performance of mobile phones. Efficiency and convenience of use. The instant search function pioneered by the Galaxy S24 series is one of the highlights. Users only need to press and hold

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

See all articles