现在位置首页 / 项目实战 /正文

Jquery DataTable 设置表头宽度

作者: IT小兵 | 2014年3月7日| 热度:℃ | 评论: |参与:

jquery datatable 是一个很强大的表格控件,但是很多资料都是国外的。

昨天遇到设置表头固定宽度的问题,这里整理一下:

设置表头的参数只有一个:sWidth。

但是可以用2种方式:aoColumnDefs和aoColumns。

这2个参数的意思是:

除了Datatable默认的列属性,给DataTable中的每一列的具体说明。 利用aoColumnDefs参数和aoColumns来配置每列中的对象信息。
该aoColumnDefs参数和aoColumns达到同样的目的,但是有点不同的。
工作原理如下:
aoColumnDefs:此数组可以让您针对特定的列,多列或所有列,使用每个对象的aTargets属性数组中(请注意,aoColumnDefs是在数据表1.7中引入)。这允许极大的灵活性创建表的时候,因为aoColumnDefs数组可以是任意长度的,针对你特别想要的列。该aTargets属性是一个数组来针对一个多列,并在它可以是每个元素:
一个字符串 - 类名称将被匹配上的TH为列
0或正整数 - 从左边的列索引计数
一个负整数 - 列索引从右边计数
字符串“_all” - 所有的列(即指定一个默认值)
aoColumns:如果指定,那么这个数组的长度必须等于列的原始HTML表格的数量。您希望只使用默认值,并自动检测选项使用'空'。
既aoColumnDefs参数和aoColumns可以一起使用,虽然aoColumnDefs优选由于它的灵活性。如果两者都使用,aoColumns定义将最高优先级。同样地,如果同一列对象中多次aoColumnDefs,阵列中的第一个元素将采取的最高优先级,而上是最低的。


示例代码:

// 使用aoColumnDefs
$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumnDefs": [
      { "sWidth": "20%", "aTargets": [ 0 ] }
    ]
  } );
} );
 
 
// 使用aoColumns
$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumns": [
      { "sWidth": "20%" },
      null,
      null,
      null,
      null
    ]
  } );
} );

定义 sWidth的数值,可以使用3种css格式:px,百分比,em。

aTargets参数:是指对那几个表头列进行宽度约束。支持数组。

注意:aTargets支持索引、class类名。

下面是使用class类名的例子:

   oTable = $("#TablebillList").dataTable({
                        "aaData": tempdata, "bPaginate": false,                       
                        "aaSorting": [[ 0, "desc" ]],
                        "oLanguage": {
                            "sProcessing": "正在加载中......",
                            "sLengthMenu": "每页显示 _MENU_ 条记录",
                            "sZeroRecords": "正在加载中......",
                            "sEmptyTable": "查询无数据!",
                            "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
                            "sInfoEmpty": "显示0到0条记录",
                            "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                            "sSearch": "当前数据搜索",
                            "oPaginate": {
                                "sFirst": "首页",
                                "sPrevious": "上一页",
                                "sNext": "下一页",
                                "sLast": "末页"
                            }
                        }, "bJQueryUI": true,
                        "sScrollY": "500px", "sScrollX": "500px",
                        "aoColumnDefs": [
                         { "sWidth": "5%", "aTargets": [0] }, 
                         { "sWidth": "250px", "aTargets": ["jizhan"] },
                           { "sWidth": "100px", "aTargets": ["shichang"] },
                         { "sWidth": "250px", "aTargets": ["jizhan2"] },
                        { "sWidth": "250px", "aTargets": ["shijian"] },
                   { "sWidth": "150px", "aTargets": ["guishudi"] },
                     { "sWidth": "150px", "aTargets": ["haoma"] }
                        ],
                      
                         "bProcessing": true,   
                        "bInfo": false, "bDestroy": true,
                        "fnRowCallback": function (nRow, aData, iDisplayIndex) { 
                            return nRow;
                        }
                    });


转发注明:IT分享


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询