datatables 选项之DOM:定义表格控件在页面的显示顺序以及language语言选项

每个控件元素在数据表都有一个关联的单个字母。
l --- 每页显示行数的控件(显示选择每页显示条数的下拉框)
f --- 检索条件的控件(搜索框的关联字母)
t --- 表格控件(显示表格的关联字母)
i --- 表信息总结的控件(比如显示 - 第 1 页 / 总 5 页和过滤总件数 _MAX_ 条等总结信息)
p --- 分页控件(显示上一页12345...下一页的关联字母)
r --- 处理中的控件(显示处理中...加载中...等)
还可以在控件元素外添加DIV和Class,语法如下
< and > --- DIV元素
<"class" and > --- DIV和Class

<"#id" and > --- DIV和ID

如:

"dom": 'lfrtip',//这些功能默认的位置是这样的每个字母的先后代表每个功能输出在页面上的先后

"dom": 'lrtip'  页面少了f --- 检索条件的控件(搜索框)


例子:

var data1 =[

{
       "name":       "aaTiger Nixon",
       "position":   "System Architect",
       "salary":     "$3,120",
       "start_date": "2011/04/25",
       "office":     "Edinburgh",
       "extn":       "5421"
},
{
       "name":       "aaGarrett Winters",
       "position":   "Director",
       "salary":     "$5,300",
       "start_date": "2011/07/25",
       "office":     "Edinburgh",
       "extn":       "8422"
},

]

$(document).ready( function () {


$('#table_id').DataTable({
//"dom": '<"bbb"lfrtip>',//这些功能默认的位置是这样的
  dom: 'B<"toolbar">frtip',
 
 "buttons": [
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }
        ],


    data: data1,
    columns: [
       { data: 'name' },
       { data: 'position' },/*注意这里的数据要和table<th>要一一对应*/
       { data: 'salary' },
       { data: 'office' },
       { data: 'extn' }


   ],
   'language':{  
       "emptyTable":     "没有数据",  
       "info":           "从 _TOTAL_ 数据中显示 _START_ 到 _END_ 条数据",  
       "infoEmpty":      "从0条记录中显示0到0条记录",  
       "infoFiltered":   "(查询筛选时总共过滤 _MAX_ 条)",  
       "infoPostFix":    "",  
       "thousands":      ",",  
       "lengthMenu":     "每页显示 _MENU_ 记录(数据)",  
       "loadingRecords": "加载中...",  
       "processing":     "查询中...",  
       "search":         "查询筛选:",  
       "zeroRecords":    "没有数据",  
       "paginate": {  
           "first":      "首页",  
           "last":       "尾页",  
           "next":       "下一页",  
           "previous":   "上一页"  
       },  
       "aria": {  
           "sortAscending":  ": 激活列升序排序",  
           "sortDescending": ": 激活列降序排序"  
       } ,
        'info': '第 _PAGE_ 页 / 总 _PAGES_ 页', //加上这条 language里的info会被覆盖将不再显示
           'infoEmpty': '没有数据',  //加上这条 language里的emptyTable会被覆盖将不再显示
           'infoFiltered': '(过滤总件数 _MAX_ 条)'//加上这条 language里的infoFiltered会被覆盖将不再显示


   }  
   //paging:false,//分页
    //scrolly:400,//滚动条
    //分页和滚动条是连用的因为如果分页默认是开着的那么滚动条是无效的貌似只将分页关掉也会有滚动条出现
});
$("div.toolbar").html('<b style="color:red">自定义文字图片等。。。</>');
} ); 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用DataTables表格插件中的`columns`选项来配置每一列的显示格式。`columns`选项是一个数组,每个元素表示一列,可以包含多个属性,常用的属性有: - `data`:指定列的数据源字段名。 - `title`:指定列的标题。 - `render`:指定列的渲染函数,用于对数据进行格式化处理。 - `className`:指定列的CSS类名,用于自定义样式。 - `orderable`:指定列是否允许排序。 - `searchable`:指定列是否允许搜索。 - `visible`:指定列是否可见。 - `width`:指定列的宽度。 例如,下面的示例代码定义了一个包含四列的表格,其中第一列是`id`字段,第二列是`name`字段,第三列是`age`字段,第四列是`email`字段。其中,第四列使用了`render`属性来定义一个渲染函数,将电子邮件地址显示为一个链接: ```javascript $('#example').DataTable( { "columns": [ { "data": "id", "title": "ID", "orderable": true, "searchable": true }, { "data": "name", "title": "Name", "orderable": true, "searchable": true }, { "data": "age", "title": "Age", "orderable": true, "searchable": true }, { "data": "email", "title": "Email", "orderable": false, "searchable": true, "render": function ( data, type, row ) { return '<a href="mailto:' + data + '">' + data + '</a>'; } } ] } ); ``` 在这个示例中,除了第四列使用了`render`属性外,其它列都使用了默认的配置,表示允许排序和搜索,使用数据源中对应的字段名作为列标题。如果需要自定义样式,可以使用`className`属性指定CSS类名,然后在CSS样式文件中定义相应的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值