我正在使用数据表 Row Group创建一个分为多个部分的表的功能。
我目前的结果如下:
但是，我想将分隔部分向右对齐(见下文)
我正在尝试通过使用 text-align:right 实现此结果；如 this question 中所述, 但使用 text-align:right 似乎不起作用
请参阅下面的代码和 here for my jsfiddle
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.css"
/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<table id="example" class="display" style="width:100%">
</table>
</div>
</div>
</div>
<script>
data = [{
DT_RowId: "row_1",
first_name: "Garrett",
position: "Accountant",
email: "g.winters@datatables.net",
office: "New York",
extn: "8422",
},
{
DT_RowId: "row_2",
first_name: "Chris",
position: "Accountant",
email: "g.winters@datatables.net",
office: "New York",
extn: "8422",
},
{
DT_RowId: "row_3",
first_name: "Tiger",
position: "Analyst",
email: "g.winters@datatables.net",
office: "New York",
extn: "8422",
},
{
DT_RowId: "row_4",
first_name: "Bob",
position: "Analyst",
email: "g.winters@datatables.net",
office: "Tokyo",
extn: "8422",
}]
table = $("#example").DataTable({
data: data,
rowGroup: {
startRender: null,
endRender: function ( rows, group ) {
return $('<tr/>')
.append( '<td style="text-align:right;" colspan="2">Im trying to pull this to the right</td>');
},
dataSrc:'office',
},
columns: [
{ data: "position",title:'position'},
{ data: "extn" ,title:'extn'},
{ data: "first_name",title:'Name'},
{ data: "office",title:'office'},
]
});
</script>
</body>
</html>
最佳答案
您需要添加额外的 <td>下面的标签，当你做你的返回。
像这样:
table = $("#example").DataTable({
data: data,
rowGroup: {
startRender: null,
endRender: function ( rows, group ) {
return $('<tr/>')
.append( '<td style="text-align:right;" colspan="2">Im trying to pull this to the right</td>')
.append('<td></td>')
.append('<td></td>');
},
dataSrc:'office',
},
columns: [
{ data: "position",title:'position'},
{ data: "extn" ,title:'extn'},
{ data: "first_name",title:'Name'},
{ data: "office",title:'office'},
]
});
关于javascript - 如何将 rowGroup 与 DataTables 一起使用，以便 rowGroup 分隔符右对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52087395/