html 属性表格插件,jQuery - 第三方表格插件DataTables使用详解10(列属性的详细设置)...

在之前的样例中,我们都是在 html页面里的 thead 标签中配置表格列。

编号姓名出生日期

其实也可以在初始化 DataTables时,直接通过 columns属性来配置列。而且该属性还提供更加丰富的功能。

二十、每一列单独设置

1,基本用法

假设要显示如下表格:

c1de2d68c67d98c1f1d957c927123d92.png

(1)如果表格数据类型为数组可以这么配置:

$('#myTable').DataTable({

"ajax": 'data.txt',

"columns": [

{ title: '编号'},

{ title: '姓名'},

{ title: '出生日期'}

]

});

(2)如果表格数据类型为对象可以这么配置:

$('#myTable').DataTable({

"ajax": 'data.php',

"columns": [

{ title: '编号', data: "id"},

{ title: '姓名', data: "name"},

{ title: '出生日期', data: "birthday"}

]

});

(3)这样 html代码就很简单了:

2,样式相关的属性

(1)下面几个属性可以设置列的样式:

width:列宽

className:这里的 class会应用到 td上面

visible:是否显示当前列

cellType:单元格类型。可选值为:th、td

(2)使用样例

$('#myTable').DataTable({

"ajax": 'data.php',

"columns": [

{ title: '编号', data: "id", width:"20%", className:"col1"},

{ title: '姓名', data: "name", width:"40%", className:"col2"},

{ title: '出生日期', data: "birthday", width:"40%", className:"col3"}

]

});

3,内容相关的属性

(1)defaultContent可以设置当内容为 null或 undefined时,用于显示的值。

15746b7a58b364a3a0a0d28256360a48.png

$('#myTable').DataTable({

"ajax": 'data.php',

"columns": [

{ title: '编号', data: "id"},

{ title: '姓名', data: "name"},

{ title: '出生日期', data: "birthday", defaultContent:"--未知--"}

]

});

(2)使用 render可以设置自定义渲染器。比如我们判断第三列内容的字数,如果超过 4 个则直接截断并附上省略号。

8cb3a9635bfa2952b325c2f0084ed9e0.png

$('#myTable').DataTable({

"ajax": 'data.php',

"columns": [

{ title: '编号', data: "id"},

{ title: '姓名', data: "name"},

{ title: '出生日期', data: "birthday",

// data:当前cell的data,这个data和type有关

// type:filter,display,type,sort

// row:当前行数据

// https://datatables.net/reference/option/columns.render

render: function (data, type, row, meta) {

return type === 'display' && data.length > 4 ?

'' + data.substr(0, 4) + '...' : data;

},

}

]

});

(3)我们可以把某列的 data配置成 null,这样该列的 render函数中就可以使用整行数据:

$('#myTable').DataTable({

"ajax": 'data.php',

"columns": [

{ title: '编号', data: "id"},

{ title: '姓名', data: "name"},

{ title: '出生日期', data: null,

render: function (data, type, row, meta) {

return type === 'display' && data.birthday.length > 4 ?

'' + data.birthday.substr(0, 4) + '...' :

data.birthday;

},

}

]

});

4、排序、搜索相关的属性

(1)属性介绍:

orderable:是否可排序。默认为 true

orderData:指定当前列进行排序操作的时候,实际用的是哪一列(或几列)的数据进行真正的排序(通常是隐藏的)

searchable:是否允许搜索此列。默认为 true

type:主要用于排序和筛选,指定当前列作为什么类型进行解析。该属性仅 ClientSide有效。

可选值有date,num,num-fmt,html-num,html-num-fmt,html,string

(2)使用样例

$('#myTable').DataTable({

"ajax": 'data.php',

"columns": [

{ title: '编号', data: "id"},

{ title: '姓名', data: "name"},

{ title: '出生日期', data: "birthday",

orderable: true,

orderData: [0, 1],

searchable: false,

type: "html"

}

]

});

5,单元格创建完后的回调

createdCell为单元格创建完后的回调,可以作为前面介绍的 render的补充。比如下面将小于等于3 的编号设置为红色。

5b93521d2f8a0f65934a2e191da0a677.png

$('#myTable').DataTable({

"ajax": 'data.php',

"columns": [

{ title: '编号', data: "id",

// cell:TD的dom

// cellData:原始的单元格数据,如何render中进行了格式化,用$(cell).html()来取格式化后的数据

// rowData:行数据

// row:行号

// col:列号

createdCell: function (cell, cellData, rowData, row, col) {

if ( cellData <= 3 ) {

$(cell).css('color', 'red')

}

}

},

{ title: '姓名', data: "name"},

{ title: '出生日期', data: "birthday"}

]

});

二十一、多列同时设置

1,columnDefs 属性介绍

(1)除了上面的 columns,还有个 columnDefs属性可以设置列。只要 columns可以定义的属性,也都可以在这里定义。

(2)与 columns不同的是,columnDefs另外增加了 targets属性用于指定列范围。即一个配置可以同时应用于多列。

(3)优先级方面,上面的 columns高于 columnDefs。

2,使用样例

(1)效果图

下面我们将第一个列和最后一列的内容变成使用 input文本输入框显示。

20402d27e27ce63678eccc6b8f9abd91.png

(2)样例代码

$('#myTable').DataTable({

"ajax": 'data.php',

"columns": [

{ title: '编号', data: "id"},

{ title: '姓名', data: "name"},

{ title: '出生日期', data: "birthday"}

],

"columnDefs": [

{

targets: [0, 2],

render: function (data, type, row, meta) {

if (type === 'display') {

return '';

}

return data;

},

}

],

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Java中使用jQuery表格datatables,您需要将datatables件的JavaScript和CSS文件添加到您的项目中,并将它们链接到您的HTML页面。然后,您可以使用以下步骤来在Java中使用datatables件: 1.在HTML页面中创建一个表格,并添加一个唯一的ID。 2.在JavaScript代码中初始化datatables件,并将其绑定到表格的ID。 例如,以下是初始化datatables件并将其绑定到表格ID为"example"的代码示例: ``` $(document).ready(function() { $('#example').DataTable(); } ); ``` 3.在Java代码中,您需要从数据库中检索数据,并将其转换为JSON格式。 4.将JSON数据传递给您的HTML页面,以便datatables件可以使用它来填充表格。 例如,以下是从Java中检索数据并将其转换为JSON格式的代码示例: ``` List<Employee> employees = employeeService.getEmployees(); Gson gson = new Gson(); String json = gson.toJson(employees); model.addAttribute("employeesJson", json); ``` 5.在HTML页面中,使用datatables件的"ajax"选项将JSON数据传递给表格。 例如,以下是将JSON数据传递给表格的代码示例: ``` $(document).ready(function() { $('#example').DataTable( { "ajax": "/employees", "columns": [ { "data": "id" }, { "data": "name" }, { "data": "position" }, { "data": "salary" } ] } ); } ); ``` 在上述代码中,"ajax"选项指向您的Java控制器中的URL,该控制器返回JSON数据。"columns"选项指定表格。每个"columns"对象中的"data"属性指定JSON数据对象中的属性。 希望这可以帮助您开始在Java中使用datatables件!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值