修复数据表中的列
我在我的网络应用程序中使用DataTable，我正在尝试修复水平滚动上的前3列。
检查DataTable文档后，建议在启动数据表时使用 fixedColumns 属性。我尝试了他们的解决方案，但最终得到了一个凌乱的非样式数据表，似乎数据表被转换为2个内部表，其中固定表不会与可移动表相同的样式。
以下是我启动数据表的方法：
table = $('#MailDataTable').DataTable({
'bJQueryUI' :true,
"processing": true,
"serverSide": true,
"fixedColumns": true,
"ajax": {
"url": "GetCTSRecords?DBName="+"${DBName}"+"&TableName="+"${TableName}",
"type":"POST",
"data": function ( d ) {
return $.extend( {}, d, {
"DBName" : "${DBName}",
"TableName" : "${TableName}",
"Where" : Where,
"OrderBy" : "${OrderBy}",
"JSONCTS" : "true",
"Count" : "no",
"FieldList" : "min",
"totalDataTableRecords" : totalDataTableRecords,
"iconsToDisplay" : "${iconsToDisplay}",
"additionalFilter" : searchFields,
"additionalWhere" : additionalWhere,
"DocCount" : "${DocCount}",
"LinkType" : "both",
"fromWhere" :fromWhere
} );
}
},
"scrollX": true,
//"bSort":true,
"scrollCollapse": true,
"iDisplayLength": 20,
"lengthMenu": [10,20, 25, 50, 75, 100],
"blength":true,
"pagingType": "input",
"language": {
"sSearch": " " + "${tr.Search}" + " ",
"zeroRecords": "${tr.NoMatchFound}",
"info": "_START_ "+"${tr.to}" + " _END_ " + "${tr.Items} " +"${tr.of}" +" _TOTAL_ ",
"infoFiltered": "${tr.of}" + " _TOTAL_ " + "${tr.Items}",
"sLengthMenu": " _MENU_ ",
"infoEmpty": "${tr.NoEntries}",
"sEmptyTable": "${tr.TableIsEmpty}",
"sProcessing": "<img src='apps/ctsc/images/Resources/Loading.gif' /><span class='GridLoadingMessage'>" + resources_Loading + " " + resources_PleaseWait + "</span>",
oPaginate: {
"sFirst": "",
"sLast": "",
"sNext": "",
"sPrevious": ""
}
},
"bAutoWidth": false,
"initComplete":function(settings,json){
$("#DataTable_wrapper .Header th > div > span").each(function(index ){
if($(this).parent().text()!="")
$(this).addClass("icon");
});
$('.paginate_page').text(resources_Page+" ");
$('.paginate_of').text($('.paginate_of').text().replace( /of/gi,resources_Of));
addToolTips();
totalDataTableRecords = json.totalDataTableRecords;
$("#dataTableHeader1").css("opacity","1");
},
columns: columnsCust,
columnDefs: columnDef
,deferRender: true
, dom: '<"top">rt<"bottom">ilBp<"clear">'
,buttons: [
{
header: true,
text: "<img src='apps/ctsc/images/Resources/refresh.svg' style='width:16px;height:16px' title='"+ resources_Refresh+"'/>",
className: 'refreshbtn',
action: function(){
if ($('#MailDataTable tbody tr').length > 0)
{
totalDataTableRecords = "";
var table = $('#MailDataTable').DataTable();
table.destroy();
}
BuildDataTable();
}
},
{
extend: 'print',
header: true,
text: "<img src='apps/ctsc/images/Resources/Print.svg' style='width:16px;height:16px' title='"+resources_Print+"'/>"
},
{
extend: 'excel',
header: true,
text:"<img src='apps/ctsc/images/Resources/Excel.svg' style='width:16px;height:16px' title='"+ resources_Excel+"'/>"
},
{
extend: 'pdf',
header: true,
text: "<img src='apps/ctsc/images/Resources/PDF.svg' style='width:16px;height:16px' title='"+ resources_Pdf+"'/>",
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
});
下面是我的初始数据表，后面是应用 fixedColumns 属性后的新数据表：
在：
后：
如您所见，在第二张图片中，水平滚动消失，数据表的样式被破坏。
任何人都知道如何修复DataTable中的列。 请注意，我不想摆脱DataTable，我喜欢它，如果这个属性不起作用，我会接受任何css解决方案。
1 个答案:
答案 0 :(得分：0)
从图片中可以看出，我需要正确的4列排列。
以下是我用于设置所有三个表的缩写表定义：
var commonDefs = {
autoWidth: false,
columnDefs: [{
targets: [-1, -2, -3],
width: "100px",
type: "$money",
className: "dt-head-center dt-body-right",
render: function (data, type, full, meta) { return onColumnRender(data, type, full, meta); }
},
{ targets: [-4], type: "string", width: "75px", className: "dt-center" }
]
};
// show revision level table
if ($("#tblRevTotal").length > 0) {
$("#tblRevTotal").DataTable(commonDefs);
}
// append definital for the remaining tables. (all but revision summary)
commonDefs.columnDefs[commonDefs.columnDefs.length] = { targets: [0], width: "100px" };
commonDefs.columnDefs[commonDefs.columnDefs.length] = { targets: [1], width: "325px" };
// footer not used.
$(".TaskDataTable").each(function () {
$(this).find("tfoot").children().remove();
$(this).DataTable(commonDefs);
})
和每个树表的html。 DataTable基本css的宽度为100％，因此我将外部div设置为我想要的较大表的宽度。 Float right被添加到内部div。
<div id="TPSRollUpContainer" style="width: 1050px;">
<fieldset id="fsRevisionRollUp">
<legend>Overview Total</legend>
<div style="float: right;">
<table class="display" id="tblRevTotal">
<thead>
<tr>
<th></th>
<th>Money One</th>
<th>Money Two</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<th class="dt-subheader">Funded</th>
<td>400000</td>
<td>400000</td>
<td>800000</td>
</tr>
<tr>
<th class="dt-subheader">Unfunded</th>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th class="dt-subheader">Total</th>
<td>40000</td>
<td>400000</td>
<td>800000</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
</fieldset>
<div>
<fieldset>
<legend>
Task 1
</legend><div class="TableContainer" id="divTaskNo_1">
<table class="TaskDataTable display" id="tblTaskNo_1">
<thead>
<tr>
<th>Number</th><th>Title</th><th>Funded</th><th></th><th>Money Two</th><th>Total</th>
</tr>
</thead><tbody>
<tr class="dt-subheader">
<td>Task 1</td><td>Title1234567890123456789012345678901234</td><td>Yes</td><td>4000000</td><td>400000</td><td>80000</td>
</tr><tr class="dt-subheader">
<td></td><td></td><td>No</td><td>0</td><td>0</td><td>0</td>
</tr><tr>
<td>Step 1.1</td><td>Title1234567890123456789012345678901234</td><td>Yes</td><td>40000</td><td>400000</td><td>800000</td>
</tr>
</tbody><tfoot>
</tfoot>
</table>
</div>
</fieldset>
</div><div>
<fieldset>
<legend>
Task 2
</legend><div class="TableContainer" id="divTaskNo_2">
<table class="TaskDataTable display" id="tblTaskNo_2">
<thead>
<tr>
<th>Number</th><th>Title</th><th>Funded</th><th>Money One</th><th>Money Two</th><th>Total</th>
</tr>
</thead><tbody>
<tr class="dt-subheader">
<td>Task 2</td><td>Task # 2</td><td>Yes</td><td>32.00</td><td>40.00</td><td>72.00</td>
</tr><tr class="dt-subheader">
<td></td><td></td><td>No</td><td>0</td><td>0</td><td>0</td>
</tr><tr>
<td>Step 2.1</td><td>Step Number # 1</td><td>Yes</td><td>16.00</td><td>20.00</td><td>36.00</td>
</tr><tr>
<td>Step 2.3</td><td>Step Number # 1</td><td>Yes</td><td>0.00</td><td>0.00</td><td>0.00</td>
</tr><tr>
<td>Step 2.4</td><td>Step Number # 1</td><td>Yes</td><td>16.00</td><td>20.00</td><td>36.00</td>
</tr>
</tbody><tfoot>
</tfoot>
</table>
</div>
</fieldset>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？