0
我在我的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