jQuery DataTables: điều khiển chiều rộng bảng

Tôi gặp sự cố khi kiểm soát chiều rộng của bảng bằng cách sử dụng plugin jQuery DataTables. Bảng được cho là bằng 100% chiều rộng vùng chứa, nhưng kết thúc là chiều rộng tùy ý, thay vì nhỏ hơn chiều rộng vùng chứa.

Đề xuất được đánh giá cao

Khai báo bảng trông như thế này

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

Và javascript

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

Kiểm tra HTML trong Firebug, bạn thấy điều này (lưu ý thêm style = "width: 0px;")

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

Trong Firebug ở các kiểu, kiểu table.display đã được ghi đè. Không thể thấy điều này đến từ đâu

element.style {  
  width:0;}    

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

Sự cố là do dataTable phải tính toán chiều rộng của nó - nhưng khi được sử dụng bên trong một tab, nó sẽ không hiển thị, do đó không thể tính toán chiều rộng. Giải pháp là gọi 'fnAdjustColumnSizing' khi tab hiển thị.

Mở đầu

Ví dụ này cho thấy cách DataTables có chức năng cuộn có thể được sử dụng cùng với các tab jQuery UI (hoặc thực sự là bất kỳ phương pháp nào khác, theo đó bảng nằm trong phần tử ẩn (display: none) khi nó được khởi tạo). Lý do điều này đòi hỏi phải được xem xét đặc biệt, là khi DataTables được khởi tạo và nó nằm trong một phần tử ẩn, trình duyệt không có bất kỳ phép đo nào để cung cấp DataTables và điều này sẽ đòi hỏi sự lệch cột khi bật tính năng cuộn.

Phương pháp để giải quyết vấn đề này là gọi hàm API fnAdjustColumnSizing. Hàm này sẽ tính toán độ rộng cột cần thiết dựa trên dữ liệu hiện tại và sau đó vẽ lại bảng - đây chính xác là những gì cần thiết khi bảng hiển thị lần đầu tiên. Đối với điều này, chúng tôi sử dụng phương thức 'hiển thị' được cung cấp bởi các bảng giao diện người dùng jQuery. Chúng tôi kiểm tra xem DataTable đã được tạo hay chưa (lưu ý bộ chọn bổ sung cho 'div.dataTables_scrollBody', bộ chọn này được thêm vào khi DataTable được khởi tạo). Nếu bảng đã được khởi tạo, chúng tôi kích thước lại nó. Một tối ưu hóa chỉ có thể được thêm vào kích thước lại của lần hiển thị đầu tiên của bảng.

Mã khởi tạo

$(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 ] }
        ]
    } );
} );

Xem cái này để biết thêm thông tin.

Bạn sẽ muốn tinh chỉnh hai biến khi khởi tạo dataTables: bAutoWidthvàaoColumns.sWidth

Giả sử bạn có 4 cột với chiều rộng 50px, 100, 120px và 30px, bạn sẽ làm như sau:

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

Bạn có thể tìm thêm thông tin về cách khởi tạo dataTables tại http://datatables.net/usage

Theo dõi sự tương tác giữa cài đặt widhts này và CSS bạn đang áp dụng. Bạn có thể nhận xét CSS hiện có của mình trước khi thử điều này để xem bạn tiến gần đến đâu.

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

Chà, tôi không quen với plugin đó, nhưng bạn có thể đặt lại kiểu sau khi thêm dữ liệu được không? Cái gì đó như

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

sau cuộc gọi .dataTable?

Tôi đã gặp nhiều vấn đề với độ rộng cột của các dữ liệu. Cách khắc phục kỳ diệu đối với tôi là bao gồm dòng

table-layout: fixed;

css này đi với css tổng thể của bảng. Ví dụ: nếu bạn đã khai báo các dữ liệu như sau:

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

thì dòng Magic css sẽ đi trong lớp Loadtable

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

}

Giải pháp TokenMacGuys hoạt động tốt nhất vì đây là kết quả của một lỗi trong jQdataTable. Điều gì sẽ xảy ra nếu bạn sử dụng $ ('# sometabe'). DataTable (). FnDestroy (), chiều rộng bảng được đặt thành 100px thay vì 100%. Đây là một bản sửa lỗi nhanh chóng:

$('#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%");
        }

    });

Thêm lớp css này vào trang của bạn, nó sẽ khắc phục sự cố:

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

Đặt độ rộng rõ ràng bằng cách sử dụng sWidthcho từng cột VÀ bAutoWidth: falsetrong quá trình dataTablekhởi tạo đã giải quyết được vấn đề (tương tự) của tôi. Yêu chồng tràn.

Bạn phải để lại ít nhất một trường không có trường cố định, ví dụ:

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

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

Bạn có thể thay đổi tất cả, nhưng chỉ để lại một là null, để nó có thể kéo dài. Nếu bạn đặt chiều rộng trên TẤT CẢ, nó sẽ không hoạt động. Hy vọng tôi đã giúp ai đó ngày hôm nay!

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

Điều này hoạt động tốt để điều chỉnh chiều rộng toàn bộ bảng. Cảm ơn @Peter Drinnan!

Như trên Datatable 10.1, điều này là thẳng thắn. Chỉ cần đặt thuộc tính chiều rộng vào bảng của bạn trong HTML. tức là width = "100%", điều này sẽ ghi đè tất cả các kiểu CSS do DT thiết lập.

Xem http://www.datatables.net/examples/basic_init/flexible_width.html này

Không có giải pháp nào ở đây phù hợp với tôi. Ngay cả ví dụ trên trang chủ của dữ liệu cũng không hoạt động do đó việc khởi tạo dữ liệu trong tùy chọn hiển thị.

Tôi đã tìm thấy một giải pháp cho vấn đề. Mẹo là sử dụng tùy chọn kích hoạt cho các tab và gọi fnAdjustColumnSizing () trên bảng hiển thị :

$(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);

});

Chỉ cần nói rằng tôi đã gặp chính xác vấn đề giống như bạn, mặc dù tôi chỉ áp dụng JQuery cho một bảng bình thường mà không có bất kỳ Ajax nào. Vì một số lý do, Firefox không mở rộng bảng sau khi tiết lộ nó. Tôi đã khắc phục sự cố bằng cách đặt bảng bên trong DIV và thay vào đó áp dụng các hiệu ứng cho DIV.

Bạn đang làm điều này trong sự kiện đã sẵn sàng?

$ (tài liệu) .ready (function () {...});

Kích thước rất có thể sẽ phụ thuộc vào tài liệu được tải đầy đủ.

Đối với bất kỳ ai gặp sự cố khi điều chỉnh chiều rộng bảng / ô bằng cách sử dụng plugin tiêu đề cố định:

Các bảng dữ liệu dựa vào thẻad cho các tham số chiều rộng cột. Điều này là do nó thực sự là html gốc duy nhất vì hầu hết html bên trong của bảng được tạo tự động.

Tuy nhiên, những gì sẽ xảy ra là một số ô của bạn có thể lớn hơn chiều rộng được lưu trữ bên trong các ô thứ.

Tức là nếu bảng của bạn có nhiều cột (bảng rộng) và các hàng của bạn có nhiều dữ liệu, thì việc gọi "sWidth": để thay đổi kích thước ô td sẽ không hoạt động bình thường vì các hàng con tự động thay đổi kích thước của td dựa trên tràn nội dung và điều này xảy ra sau khi bảng được khởi tạo và chuyển thông số init của nó.

Thead ban đầu "sWidth": tham số bị ghi đè (bị thu hẹp) vì các dữ liệu cho rằng bảng của bạn vẫn có chiều rộng mặc định là% 100 - nó không nhận ra rằng một số ô đã bị tràn.

Để khắc phục điều này, tôi đã tìm ra chiều rộng tràn và tính toán nó bằng cách thay đổi kích thước bảng cho phù hợp sau khi bảng đã được khởi tạo - trong khi chúng tôi đang ở đó, chúng tôi có thể nhập tiêu đề cố định của chúng tôi cùng một lúc:

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

tạo tiêu đề cố định của bạn bên trong "thành công" của cuộc gọi ajax của bạn, bạn sẽ không gặp bất kỳ vấn đề nào về căn chỉnh trong tiêu đề và hàng.

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

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

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

Hy vọng điều này sẽ giúp một ai đó vẫn đang gặp khó khăn.

Không giữ bàn của bạn bên trong bất kỳ thùng chứa nào. Đặt trình bao bọc của bảng thành vùng chứa của bạn sau khi bảng được hiển thị. Tôi biết điều này có thể không hợp lệ ở những nơi bạn có thứ gì đó khác cùng với bảng nhưng sau đó bạn luôn có thể nối nội dung đó lại.

Đối với tôi, vấn đề này phát sinh nếu bạn có một thanh bên và một vùng chứa thực sự là một phần bù cho thanh bên đó.

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

(Tôi đã thêm một bảng điều khiển-mặc định)
Và lớp của bạn:

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

tìm một liên kết hữu ích khác về vấn đề này và nó đã giải quyết được vấn đề của tôi.

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

Bảng chiều rộng lực lượng dữ liệu

Tôi gặp phải sự cố tương tự khi có một div quấn quanh bảng.

Thêm vị trí: họ hàng đã sửa nó cho tôi.

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

Tôi đã gặp sự cố tương tự trong đó nội dung của bảng lớn hơn đầu trang và chân trang của bảng. Thêm một div xung quanh bảng và thiết lập x-tràn có vẻ đã giải quyết được vấn đề này:

Đảm bảo rằng tất cả các tham số khác trước bAutoWidth & aoColumns được nhập chính xác. Bất kỳ tham số sai nào trước đó sẽ phá vỡ chức năng này.

tôi đã gặp sự cố tương tự và thấy rằng văn bản trong các cột không bị vỡ và sử dụng mã css này đã giải quyết được vấn đề

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

Đây là cách làm của tôi ..

$('#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' }
    ]
});

Tôi gặp cùng một vấn đề ngày hôm nay.

Tôi đã sử dụng một cách khó khăn để giải quyết nó.

Mã của tôi như bên dưới.

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

Kiểm tra giải pháp này quá. điều này đã giải quyết vấn đề chiều rộng cột DataTable của tôi một cách dễ dàng

JQuery DataTables 1.10.20 giới thiệu columns.adjust()phương pháp khắc phục sự cố tab chuyển đổi Bootstrap

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

Vui lòng tham khảo tài liệu: Tab Scrolling và Bootstrap

Điều này hoạt động tốt.

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