DataTable中各行数据的设置

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;

                        }

                    });