数据表在没有 Ajax 的情况下显示有关子行的信息
Datatables show info on child rows without Ajax
我试图在不使用 ajax 的情况下在子行上显示额外信息,问题是它运行良好,但我想以列表方式显示多个值。
Something like this
有什么建议吗?
我正在使用 web2py 获取数据并填充 table,这是我的尝试:
<script>
var tabla;
$(document).ready(function(){
tabla= $('#tablaGenerica').DataTable( {
} );
function format(value) {
return '<div>Hidden Value: ' + value + '</div>';
}
$('#tablaGenerica').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = tabla.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(tr.data('child-value'))).show();
tr.addClass('shown');
}
});
</script>
<table id="tablaGenerica" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
<thead>
<tr>
<th></th>
<th class="select-filter">Name</th>
<th class="select-filter">Age</th>
<th class="select-filter">Country</th>
<th class="select-filter">Level</th>
</tr>
</thead>
<tbody>
{{for person in formList:}}
<tr data-child-value="{{=person.Person.salary}}">
<td class="details-control"></td>
<td>{{=person.Person.name}}</td>
<td>{{=person.Person.age}}</td>
<td>{{=person.Person.country}}</td>
<td>{{=person.Person.level}}</td>
</tr>
{{pass}}
</tbody>
</table>
有一个example适合你
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var data = [{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "0,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "0,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}];
var table = $('#example').DataTable( {
"data": data,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
td.details-control {
background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
我建议稍微重构您的应用程序,因为您真的不需要在 HTML 服务器端做饭,DataTables 可以在客户端为您处理。
您可以简单地准备对象数组,其中每个条目对应于 table 行,每个对象 属性 / 内部数组元素 - 对应于相应的列(或详细信息条目):
[
{id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
{id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
{id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
]
为了 link 那些对象属性/内部数组项到您的 table 列,您可以使用 DataTables 选项 columns
或 columnDefs
:
$('#tablaGenerica').DataTable({
...
columns: [
{title: 'ID', data: 'id'},
{title: 'Name', data: 'name'},
...
]
});
之后(这是答案的重要部分),为了在您的子行中显示多个详细信息,您只需修改您的 format()
函数,以便它 returns HTML 子行的标记以及所有必要的详细信息:
const format = data => `
<div>Age: ${data.age}</div>
<div>Country: ${data.country}</div>
<div>Level: ${data.level}</div>
`;
因此,完整的 DEMO 您的案例可能看起来像这样:
//specify source data
const dataSrc = [
{id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
{id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
{id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
];
//initialize DataTables
const dataTable = $('#tablaGenerica').DataTable({
//specify necessary options to adjust DataTable to your needs
dom: 't',
data: dataSrc,
//specify columns that should be visible initially
columns: [
{title: 'ID', data: 'id'},
{title: 'Name', data: 'name'}
]
});
//declare function that renders child row with hidden details
const format = data => `
<div>Age: ${data.age}</div>
<div>Country: ${data.country}</div>
<div>Level: ${data.level}</div>
`;
//attach event listener to row click
$('#tablaGenerica').on('click', 'tr', function(){
//get clicked row into a variable
const clickedRow = dataTable.row($(this));
//show/hide child row
clickedRow.child.isShown() ? clickedRow.child.hide() : clickedRow.child(format(clickedRow.data())).show();
//toggle 'shown' class
$(this).toggleClass('shown');
});
#tablaGenerica tbody tr.even:hover, #tablaGenerica tbody tr.odd:hover{
cursor: pointer;
background: lightgray;
}
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tablaGenerica"></table>
</body>
</html>
我试图在不使用 ajax 的情况下在子行上显示额外信息,问题是它运行良好,但我想以列表方式显示多个值。
Something like this
有什么建议吗?
我正在使用 web2py 获取数据并填充 table,这是我的尝试:
<script>
var tabla;
$(document).ready(function(){
tabla= $('#tablaGenerica').DataTable( {
} );
function format(value) {
return '<div>Hidden Value: ' + value + '</div>';
}
$('#tablaGenerica').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = tabla.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(tr.data('child-value'))).show();
tr.addClass('shown');
}
});
</script>
<table id="tablaGenerica" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
<thead>
<tr>
<th></th>
<th class="select-filter">Name</th>
<th class="select-filter">Age</th>
<th class="select-filter">Country</th>
<th class="select-filter">Level</th>
</tr>
</thead>
<tbody>
{{for person in formList:}}
<tr data-child-value="{{=person.Person.salary}}">
<td class="details-control"></td>
<td>{{=person.Person.name}}</td>
<td>{{=person.Person.age}}</td>
<td>{{=person.Person.country}}</td>
<td>{{=person.Person.level}}</td>
</tr>
{{pass}}
</tbody>
</table>
有一个example适合你
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var data = [{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "0,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "0,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
}];
var table = $('#example').DataTable( {
"data": data,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
td.details-control {
background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
我建议稍微重构您的应用程序,因为您真的不需要在 HTML 服务器端做饭,DataTables 可以在客户端为您处理。
您可以简单地准备对象数组,其中每个条目对应于 table 行,每个对象 属性 / 内部数组元素 - 对应于相应的列(或详细信息条目):
[
{id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
{id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
{id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
]
为了 link 那些对象属性/内部数组项到您的 table 列,您可以使用 DataTables 选项 columns
或 columnDefs
:
$('#tablaGenerica').DataTable({
...
columns: [
{title: 'ID', data: 'id'},
{title: 'Name', data: 'name'},
...
]
});
之后(这是答案的重要部分),为了在您的子行中显示多个详细信息,您只需修改您的 format()
函数,以便它 returns HTML 子行的标记以及所有必要的详细信息:
const format = data => `
<div>Age: ${data.age}</div>
<div>Country: ${data.country}</div>
<div>Level: ${data.level}</div>
`;
因此,完整的 DEMO 您的案例可能看起来像这样:
//specify source data
const dataSrc = [
{id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
{id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
{id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
];
//initialize DataTables
const dataTable = $('#tablaGenerica').DataTable({
//specify necessary options to adjust DataTable to your needs
dom: 't',
data: dataSrc,
//specify columns that should be visible initially
columns: [
{title: 'ID', data: 'id'},
{title: 'Name', data: 'name'}
]
});
//declare function that renders child row with hidden details
const format = data => `
<div>Age: ${data.age}</div>
<div>Country: ${data.country}</div>
<div>Level: ${data.level}</div>
`;
//attach event listener to row click
$('#tablaGenerica').on('click', 'tr', function(){
//get clicked row into a variable
const clickedRow = dataTable.row($(this));
//show/hide child row
clickedRow.child.isShown() ? clickedRow.child.hide() : clickedRow.child(format(clickedRow.data())).show();
//toggle 'shown' class
$(this).toggleClass('shown');
});
#tablaGenerica tbody tr.even:hover, #tablaGenerica tbody tr.odd:hover{
cursor: pointer;
background: lightgray;
}
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tablaGenerica"></table>
</body>
</html>