我在我的web应用程序中使用DataTable,我试图修复水平滚动前3列。在数据表中的固定列
检查DataTable文档后,建议在启动数据表时使用fixedColumns属性。我尝试了他们的解决方案,但最终得到了一个乱七八糟的非风格的数据表,看起来数据表被转换成了两个内表,其中固定表没有与可移动表相同的风格。
下面的是我如何开始我的数据表:
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中的列的想法。 请注意,我不想摆脱DataTable,我喜欢它,如果此属性不起作用,我会接受任何css解决方案。
我已经有了最好的运气,将autoWidth设置为false,为除一列之外的所有列设置列宽,然后将表格放在div中并将div设置为比我想要的表格大一点是。 – Bindrid
我没有收到您的评论,您之前是否遇到过这样的问题?你是如何解决它的? –
我遇到的问题是我需要从单独的表中排列排列。但由于自动调整尺寸的原因,列宽被忽略,不能排列。我会稍后发布我的解决方案,以便您能看到我所做的并看看它是否有帮助。 – Bindrid