登录  /  注册
首页 > web前端 > js教程 > 正文
jQuery表格插件datatables用法详解_jquery
php中文网
发布： 2016-05-16 15:21:20
原创
1075人浏览过

一、Datatables简介
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：

  • 自动分页处理
  • 即时表格数据过滤
  • 数据排序以及数据类型自动检测
  • 自动处理列宽度
  • 可通过CSS定制样式
  • 支持隐藏列
  • 易用
  • 可扩展性和灵活性
  • 国际化
  • 动态创建表格
  • 免费的

二、如何使用
在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务
1、DataTables的默认配置

 $(document).ready(function() { 
$('#example').dataTable(); 
} );
登录后复制

2、DataTables的一些基础属性配置

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

3、数据排序

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

从第0列开始，以第4列倒序排列
4、隐藏某些列

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

5、国际化

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

6、排序功能：

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

7、数据获取支持4种：如下

  • •DOM 文档数据
  • •Javascript array js数组
  • •Ajax source Ajax请求数据
  • •Server side processing 服务器端数据

三、实例讲解

1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。

2、分析：添加功能---单击add按钮，弹出对话框，添加新的内容。
编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。
删除功能---单击datatables选中一行，单击delete按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击delete按钮，不会弹出警告框，也不会删除内容。
3、 编码：
Attributes//名称

 //声明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();
});
登录后复制


以上就是关于jQuery表格插件datatables用法的详细介绍，希望对大家的学习有所帮助。

				
			

                                

                    相关标签：
                    

                        jQuery 表格插件 datatables
                    

                

                                
来源：php中文网

                            


                                    
                        上一篇：JavaScript动态创建div等元素实例讲解_javascript技巧
                    
                                    
                        下一篇：详解JavaScript UTC时间转换方法_javascript技巧
                    
                


            

                
                
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

            

                
作者最新文章

                
            

        
        

            
热门推荐

            

                
            

        

        

            
        

		

		
		

        

            

                
热门教程

                更多>
                
            

            

                

                    
相关教程 

                    
热门推荐

                    
最新课程

                

                
                
                
            

            
        

        

            

                
最新下载

                更多>
                
            

                            

                    
                    

                

                        

            

                

                    
网站特效 

                    
网站源码

                    
网站素材

                    
前端模板

                

                

                

                

                

            

            
        


		

    

    

        

            

                

                    

                        关于我们
                        免责申明
                        意见反馈
                        讲师合作
                        广告合作
                        
                        技术文章
                                                

                    

                    
php中文网：公益在线php培训，帮助PHP学习者快速成长！

                    

                      
                        关注服务号
                        
                      
                        
                        技术交流群
                        
                      
                        

                    

                

                

                
app下载

                
              

            

            

                

                    
                    

                        
PHP中文网订阅号

                        
每天精选资源文章推送

                    

                

                

                    
                    

                        
PHP中文网APP

                        
随时随地碎片化学习

                    

                

                

                    
                    

                        
PHP中文网抖音号

                        
发现有趣的

                    

                

            

        

    

    

        
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
  
 | 本站CDN由 数掘科技 提供

    



        

            

            
登录PHP中文网，和优秀的人一起学习！

            
全站2000+教程免费学

            
微信扫码登录

            

            

        

    

    
  • 
        
    
            
    
                
                    
                    
    精品班
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    立即咨询
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    微信沟通
    
                    
            
    
            
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    QQ群
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    优惠券
    
                    
            
    
        
    
    
    • 
    
  • 
        
    
            
    
                
                    
                    
    返回顶部
    
                    
            
    
        
    
    
    • 

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