jQuery DataTables: ความกว้างของตารางควบคุม

ฉันมีปัญหาในการควบคุมความกว้างของตารางโดยใช้ปลั๊กอิน jQuery DataTables ตารางควรมีความกว้าง 100% ของความกว้างของคอนเทนเนอร์ แต่จะมีความกว้างตามอำเภอใจแทนที่จะน้อยกว่าความกว้างของคอนเทนเนอร์

ข้อเสนอแนะชื่นชม

การประกาศตารางมีลักษณะดังนี้

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

และจาวาสคริปต์

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

เมื่อตรวจสอบ HTML ใน Firebug คุณจะเห็นสิ่งนี้ (สังเกต style ที่เพิ่ม = "width: 0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

เมื่อมองไปที่สไตล์ Firebug สไตล์ table.display ได้ถูกแทนที่แล้ว ดูไม่ออกว่ามาจากไหน

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

ปัญหานี้เกิดขึ้นเนื่องจาก dataTable ต้องคำนวณความกว้าง - แต่เมื่อใช้ภายในแท็บจะมองไม่เห็นจึงไม่สามารถคำนวณความกว้างได้ วิธีแก้ปัญหาคือเรียก 'fnAdjustColumnSizing' เมื่อแท็บแสดงขึ้น

ปรารภ

ตัวอย่างนี้แสดงให้เห็นว่า DataTables ที่มีการเลื่อนสามารถใช้ร่วมกับแท็บ jQuery UI ได้อย่างไร (หรือวิธีอื่น ๆ โดยที่ตารางอยู่ในองค์ประกอบที่ซ่อนอยู่ (display: none) เมื่อเริ่มต้น) เหตุผลนี้ต้องได้รับการพิจารณาเป็นพิเศษคือเมื่อเริ่มต้น DataTables และอยู่ในองค์ประกอบที่ซ่อนอยู่เบราว์เซอร์จะไม่มีการวัดใด ๆ ที่จะให้ตารางข้อมูลและสิ่งนี้จะต้องใช้ในการจัดแนวคอลัมน์ไม่ตรงเมื่อเปิดใช้งานการเลื่อน

วิธีการแก้ปัญหานี้คือการเรียกใช้ฟังก์ชัน fnAdjustColumnSizing API ฟังก์ชันนี้จะคำนวณความกว้างของคอลัมน์ที่ต้องการตามข้อมูลปัจจุบันจากนั้นวาดตารางใหม่ - ซึ่งเป็นสิ่งที่จำเป็นเมื่อตารางปรากฏเป็นครั้งแรก สำหรับสิ่งนี้เราใช้วิธีการ 'แสดง' ที่จัดเตรียมโดยตาราง jQuery UI เราตรวจสอบเพื่อดูว่า DataTable ถูกสร้างขึ้นหรือไม่ (โปรดสังเกตตัวเลือกพิเศษสำหรับ 'div.dataTables_scrollBody' ซึ่งจะถูกเพิ่มเมื่อเริ่มต้น DataTable) หากตารางเริ่มต้นแล้วเราจะปรับขนาดใหม่ สามารถเพิ่มการปรับให้เหมาะสมเพื่อปรับขนาดใหม่ได้เฉพาะการแสดงตารางแรกเท่านั้น

รหัสเริ่มต้น

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

ดูนี้สำหรับข้อมูลเพิ่มเติม

คุณจะต้องปรับแต่งตัวแปรสองตัวเมื่อคุณเริ่มต้น dataTables: bAutoWidthและaoColumns.sWidth

สมมติว่าคุณมี 4 คอลัมน์ที่มีความกว้าง 50px, 100, 120px และ 30px คุณจะทำ:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

สามารถดูข้อมูลเพิ่มเติมเกี่ยวกับการเริ่มต้น dataTables ได้ที่http://datatables.net/usage

ดูการโต้ตอบระหว่างการตั้งค่าของ widhts กับ CSS ที่คุณใช้ คุณอาจแสดงความคิดเห็นเกี่ยวกับ CSS ที่มีอยู่ก่อนที่จะลองทำเพื่อดูว่าคุณเข้าใกล้แค่ไหน

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

ฉันไม่คุ้นเคยกับปลั๊กอินนั้น แต่คุณสามารถรีเซ็ตรูปแบบหลังจากเพิ่มข้อมูลได้หรือไม่? สิ่งที่ต้องการ

$("#querydatatablesets").css("width","100%")

หลังจากการเรียก. dataTable?

ฉันมีปัญหามากมายเกี่ยวกับความกว้างของคอลัมน์ของข้อมูล การแก้ไขเวทมนตร์สำหรับฉันรวมถึงเส้น

table-layout: fixed;

css นี้ไปกับ css โดยรวมของตาราง ตัวอย่างเช่นหากคุณได้ประกาศข้อมูลดังต่อไปนี้:

LoadTable = $('#LoadTable').dataTable.....

จากนั้นสาย magic css จะไปอยู่ในคลาส Loadtable

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

โซลูชัน TokenMacGuys ทำงานได้ดีที่สุดเนื่องจากนี่เป็นผลมาจากจุดบกพร่องใน jQdataTable จะเกิดอะไรขึ้นถ้าคุณใช้ $ ('# นี่คือการแก้ไขด่วน:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

เพิ่มคลาส css นี้ในเพจของคุณมันจะแก้ไขปัญหาได้:

#<your_table_id> {
    width: inherit !important;
}

การตั้งค่าความกว้างอย่างชัดเจนโดยใช้sWidthสำหรับแต่ละคอลัมน์ AND bAutoWidth: falseในการdataTableเริ่มต้นช่วยแก้ปัญหา (ที่คล้ายกัน) ของฉัน รักล้นกอง.

คุณต้องออกอย่างน้อยหนึ่งฟิลด์โดยไม่มีฟิลด์คงที่ตัวอย่างเช่น:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

คุณสามารถเปลี่ยนทั้งหมดได้ แต่ปล่อยไว้เพียงอันเดียวเป็นโมฆะจึงจะยืดออกได้ หากคุณใส่ความกว้างทั้งหมดมันจะไม่ทำงาน หวังว่าฉันจะช่วยใครสักคนในวันนี้!

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

วิธีนี้ใช้ได้ดีในการปรับความกว้างของตารางทั้งหมด ขอบคุณ @Peter Drinnan!

เช่นเดียวกับ Datatable 10.1 สิ่งนี้ตรงไปตรงมา เพียงใส่แอตทริบิวต์ width ในตารางของคุณใน HTML คือ width = "100%" ซึ่งจะแทนที่สไตล์ CSS ทั้งหมดที่ DT กำหนด

ดูhttp://www.datatables.net/examples/basic_init/flexible_width.htmlนี้

ไม่มีวิธีแก้ปัญหาใดที่ได้ผลสำหรับฉัน แม้แต่ตัวอย่างในหน้าแรกของดาต้าเบสก็ไม่สามารถใช้งานได้ด้วยเหตุนี้การเริ่มต้นของข้อมูลในตัวเลือกการแสดง

ฉันพบวิธีแก้ปัญหาแล้ว เคล็ดลับคือการใช้ตัวเลือกเปิดใช้งานสำหรับแท็บและเรียกใช้ fnAdjustColumnSizing () บนตารางที่มองเห็นได้ :

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

แค่บอกว่าฉันมีปัญหาเดียวกับคุณแม้ว่าฉันจะใช้ JQuery กับตารางปกติโดยไม่มี Ajax ด้วยเหตุผลบางประการ Firefox จึงไม่ขยายตารางออกไปหลังจากเปิดเผย ฉันแก้ไขปัญหาโดยวางตารางไว้ใน DIV และใช้เอฟเฟกต์กับ DIV แทน

คุณกำลังทำสิ่งนี้ในงานพร้อมหรือไม่?

$ (เอกสาร) .ready (ฟังก์ชัน () {... });

การปรับขนาดส่วนใหญ่จะขึ้นอยู่กับเอกสารที่โหลดจนเต็ม

สำหรับใครก็ตามที่มีปัญหาในการปรับความกว้างของตาราง / เซลล์โดยใช้ปลั๊กอินส่วนหัวคงที่:

Datatables อาศัยแท็กแท็กสำหรับพารามิเตอร์ความกว้างของคอลัมน์ เนื่องจากเป็น html ดั้งเดิมเพียงอย่างเดียวเนื่องจาก html ภายในส่วนใหญ่ของตารางได้รับการสร้างขึ้นโดยอัตโนมัติ

อย่างไรก็ตามสิ่งที่เกิดขึ้นคือเซลล์บางส่วนของคุณอาจมีขนาดใหญ่กว่าความกว้างที่เก็บไว้ในเซลล์แอด

กล่าวคือถ้าตารางของคุณมีคอลัมน์จำนวนมาก (ตารางกว้าง) และแถวของคุณมีข้อมูลจำนวนมากการเรียก "sWidth": เพื่อเปลี่ยนขนาดเซลล์ td จะทำงานไม่ถูกต้องเนื่องจากแถวลูกจะปรับขนาด td โดยอัตโนมัติโดยอิงจากโอเวอร์โฟลว์ เนื้อหาและสิ่งนี้เกิดขึ้นหลังจากที่ตารางเริ่มต้นและส่งผ่านพารามิเตอร์เริ่มต้น

พารามิเตอร์ thead "sWidth": ถูกลบล้าง (หด) เนื่องจากข้อมูลคิดว่าตารางของคุณยังคงมีความกว้างเริ่มต้นที่% 100 ซึ่งไม่ทราบว่ามีบางเซลล์ล้น

ในการแก้ไขปัญหานี้ฉันได้หาค่าความกว้างส่วนเกินและคำนวณโดยการปรับขนาดตารางตามหลังจากเริ่มต้นตารางแล้ว - ในขณะที่เราอยู่ที่นั้นเราสามารถเริ่มส่วนหัวคงที่ของเราได้ในเวลาเดียวกัน:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

สร้าง fixedheader ของคุณใน "ความสำเร็จ" ของการโทร ajax ของคุณคุณจะไม่มีปัญหาการจัดตำแหน่งในส่วนหัวและแถว

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        

หวังว่านี่จะช่วยคนที่ยังดิ้นรน

อย่าเก็บโต๊ะของคุณไว้ในภาชนะใด ๆ ทำให้กระดาษห่อของตารางเป็นภาชนะของคุณหลังจากที่ตารางแสดงผล ฉันรู้ว่าสิ่งนี้อาจไม่ถูกต้องในสถานที่ที่คุณมีอย่างอื่นพร้อมกับตาราง แต่คุณสามารถต่อท้ายเนื้อหานั้นกลับได้ตลอดเวลา

สำหรับฉันปัญหานี้เกิดขึ้นหากคุณมีแถบด้านข้างและคอนเทนเนอร์ที่เป็นออฟเซ็ตของแถบด้านข้างนั้น

$(YourTableName+'_wrapper').addClass('mycontainer');

(ฉันเพิ่มค่าเริ่มต้นแผงพาเนล)
และชั้นเรียนของคุณ:

.mycontainer{background-color:white;padding:5px;}

ค้นหาลิงก์ที่มีประโยชน์อื่นเกี่ยวกับปัญหานี้และแก้ไขปัญหาของฉันได้

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

ตารางความกว้างบังคับของ Datatables

ฉันพบปัญหาคล้าย ๆ กันเมื่อมี div พันรอบโต๊ะ

การเพิ่มตำแหน่ง: ญาติแก้ไขให้ฉัน

#report_container {
 float: right;
 position: relative;
 width: 100%;
}

ฉันมีปัญหาคล้ายกันที่เนื้อหาของตารางใหญ่กว่าส่วนหัวและส่วนท้ายของตาราง การเพิ่ม div รอบ ๆ ตารางและการตั้งค่า x-overflow ดูเหมือนจะช่วยแก้ปัญหานี้ได้:

ตรวจสอบให้แน่ใจว่าได้ป้อนพารามิเตอร์อื่น ๆ ทั้งหมดก่อน bAutoWidth & aoColumns อย่างถูกต้องพารามิเตอร์ที่ไม่ถูกต้องก่อนหน้านี้จะทำให้ฟังก์ชันนี้เสียหาย

ฉันมีปัญหาที่คล้ายกันและพบว่าข้อความในคอลัมน์ไม่แตกและการใช้รหัส css นี้ช่วยแก้ปัญหาได้

th,td{
max-width:120px !important;
word-wrap: break-word
}

นี่คือวิธีทำของฉัน ..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

ฉันพบปัญหาเดียวกันในวันนี้

ฉันใช้วิธีที่ยุ่งยากในการแก้ปัญหานี้

รหัสของฉันดังต่อไปนี้

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

ตรวจสอบโซลูชันนี้ด้วย สิ่งนี้แก้ไขปัญหาความกว้างคอลัมน์ DataTable ของฉันได้อย่างง่ายดาย

JQuery DataTables 1.10.20 แนะนำcolumns.adjust()วิธีการที่แก้ไขปัญหา Bootstrap toggle tab

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

โปรดดูเอกสารประกอบ: แท็บการเลื่อนและ Bootstrap

ใช้งานได้ดี

#report_container {
   float: right;
   position: relative;
   width: 100%;
}