جداول البيانات مسج:التحكم في عرض الطاولة

Question

لدي مشكلة في التحكم في عرض الجدول باستخدام البرنامج المساعد 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، ترى هذا (لاحظ النمط المضاف = "width:0 بكسل;")

<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%;  
}  

Answer 1

سبب المشكلة هو أن dataTable يجب أن يحسب عرضه - ولكن عند استخدامه داخل علامة تبويب، فإنه غير مرئي، وبالتالي لا يمكن حساب العرض.الحل هو استدعاء "fnAdjustColumnSizing" عندما تظهر علامة التبويب.

الديباجة

يوضح هذا المثال كيف يمكن استخدام DataTables مع التمرير مع علامات تبويب واجهة المستخدم jQuery (أو في الواقع أي طريقة أخرى يكون فيها الجدول في عنصر مخفي (Display: None) عند تهيئة).السبب في ذلك يتطلب اعتبارًا خاصًا ، هو أنه عند تهيئة DataTables ويكون في عنصر مخفي ، لا يحتوي المتصفح على أي قياسات لإعطاء DataTables ، وهذا سيتطلب في اختلال الأعمدة عند تمكين التمرير.

طريقة الالتفاف حول هذا هي استدعاء وظيفة واجهة برمجة تطبيقات fnadjustcolumnsization.ستحسب هذه الوظيفة عرض العمود المطلوب بناءً على البيانات الحالية ثم إعادة رسم الجدول - وهو بالضبط ما هو مطلوب عندما يصبح الجدول مرئيًا لأول مرة.ولهذا نستخدم طريقة "show" التي توفرها جداول 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 ] }
        ]
    } );
} );

يرى هذا لمزيد من المعلومات.

Answer 2

وأنت تريد أن يعدل متغيرين عند تهيئة 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 الموجودة قبل محاولة هذا لمعرفة مدى قربه تحصل عليه.

Answer 3

حسنا، أنا لست على دراية بأن البرنامج المساعد، ولكن يمكن إعادة تعيين أسلوب بعد إضافة DataTable و؟ شيء من هذا القبيل

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

وبعد المكالمة .dataTable؟

Answer 4

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

Answer 5

ولقد كان العديد من القضايا مع عرض الأعمدة من datatables. كان الإصلاح السحر بالنسبة لي بما في ذلك خط

table-layout: fixed;

وهذا المغلق يذهب مع المغلق العام للطاولة. على سبيل المثال، إذا كنت قد أعلنت datatables كما يلي:

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

وبعد ذلك الخط المغلق سحرية ستذهب في فئة Loadtable

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

و}

Answer 6

وحل TokenMacGuys يعمل بشكل أفضل becasue هذا هو نتيجة لوجود خطأ في jQdataTable. ما يحدث هو إذا كنت تستخدم $ ( '# sometabe'). DataTable و(). fnDestroy () يحصل على تعيين عرض الجدول ل100px بدلا من 100٪. هنا هو حل سريع:

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

    });

Answer 7

وتحديد الاعراض صراحة باستخدام sWidth لكل عمود وbAutoWidth: false في التهيئة dataTable حلها بلدي (مماثلة) المشكلة. أحب كومة فيضان.

Answer 8

وعليك أن تترك حقل واحد على الأقل من دون الحقل الثابتة، وعلى سبيل المثال:

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

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

ويمكنك تغيير كل شيء، ولكن ترك واحد فقط لاغيا، لذلك يمكن أن تمتد. إذا وضعت الاعراض على ALL فإنه لن ينجح. آمل ساعد شخص اليوم!

Answer 9

وإضافة هذه الطبقة المغلق إلى الصفحة الخاصة بك، فإنه سيتم إصلاح المشكلة:

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

Answer 10

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

وهذا عمل جيد لضبط عرض الجدول بأكمله. بفضلPeter Drinnan!

Answer 11

وباسم DataTable و10،1، وهذا هو على التوالي إلى الأمام. وضعت للتو سمة العرض إلى الجدول الخاص بك في HTML. أي العرض = "100٪"، وهذا ستتجاوز كل الأنماط CSS التي وضعتها DT.

http://www.datatables.net/examples/basic_init/flexible_width. أتش تي أم أل

Answer 12

لم ينجح أي من الحلول هنا بالنسبة لي.حتى المثال على الصفحة الرئيسية لجداول البيانات لم ينجح بالتالي في تهيئة جدول البيانات في خيار العرض.

لقد وجدت حلا للمشكلة.الحيلة هي أن استخدم خيار التنشيط لعلامات التبويب و استدعاء 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);

});

Answer 13

وفقط لأقول لقد كان بالضبط نفس المشكلة كما كنت، على الرغم من أنني كان مجرد تطبيق مسج إلى جدول العادي من دون أي اياكس. لسبب فايرفوكس لا توسيع الجدول خارج بعد الكشف عن ذلك. I إصلاح المشكلة عن طريق وضع جدول داخل DIV، وتطبيق الآثار إلى DIV بدلا من ذلك.

Answer 14

وأنت تفعل هذا في حالة استعداد؟

$(document).ready(function() { ... });

ووالتحجيم وعلى الأرجح ستكون تعتمد على الوثيقة التي يجري تحميلها بالكامل.

Answer 15

لأي شخص يواجه مشكلة في ضبط عرض الجدول/الخلية باستخدام المكون الإضافي للرأس الثابت:

تعتمد Datatables على علامات الإعلان لمعلمات عرض العمود.وذلك لأنه في الحقيقة هو HTML الأصلي الوحيد حيث يتم إنشاء معظم HTML الداخلي للجدول تلقائيًا.

ومع ذلك، ما يحدث هو أن بعض الخلايا الخاصة بك يمكن أن تكون أكبر من العرض المخزن داخل الخلايا الإعلانية.

أي.إذا كان جدولك يحتوي على الكثير من الأعمدة (جدول عريض) وكانت صفوفك تحتوي على الكثير من البيانات، فاستدعاء "sWidth":لتغيير حجم خلية td لن يعمل بشكل صحيح لأن الصفوف الفرعية تقوم تلقائيًا بتغيير حجم td بناءً على المحتوى الفائض ويحدث هذا بعد تمت تهيئة الجدول وتمرير معلمات init الخاصة به.

العنوان الأصلي "sWidth":يتم تجاوز (تقليص) المعلمات لأن جداول البيانات تعتقد أن الجدول الخاص بك لا يزال به عرضه الافتراضي وهو %100 - ولا يتعرف على أن بعض الخلايا قد تجاوزت السعة.

لإصلاح ذلك، اكتشفت عرض الفائض وقمت بحسابه عن طريق تغيير حجم الجدول وفقًا لذلك بعد تمت تهيئة الجدول--بينما نحن فيه، يمكننا بدء رأسنا الثابت في نفس الوقت:

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

Answer 16

وإنشاء fixedheader الخاص داخل "نجاح" دعوة اياكس الخاصة بك، سوف لا يكون لديك أي مشكلة المحاذاة في رأس والصفوف.

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

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

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

Answer 17

وآمل أن يساعد هذا شخص لا يزال يكافح.

ولا تبقي الجدول الخاص بك داخل أي حاوية. جعل المجمع الجدول الحاويات بعد في الجدول المقدمة. أعرف أن هذا قد يكون غير صالح في الأماكن التي لديك شيء آخر جنبا إلى جنب مع الجدول ولكن بعد ذلك يمكن إلحاق دائما أن المحتوى الظهر.

وبالنسبة لي، هذه المشكلة تنشأ إذا كان لديك الشريط الجانبي والحاويات التي هي في الواقع إزاحة إلى أن الشريط الجانبي.

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

و(أضفت لوحة لوحة الافتراضي)
وصفك:

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

Answer 18

وإيجاد صلة مفيدة أخرى حول هذه المشكلة وحلها مشكلتي.

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

Datatables إجبار الجدول عرض

Answer 19

وأنا واجهت مشكلة مشابهة عند وجود شعبة ملفوفة حول الطاولة.

وإضافة موقف: النسبية ثابتة بالنسبة لي

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

Answer 20

وكان لي مشكلة مشابهة حيث كانت محتويات الجدول أكبر من رأس الجدول وتذييل الصفحة. إضافة شعبة حول الطاولة ووضع س تجاوز يبدو أنه قد تم فرزها هذه المشكلة:

        

Answer 21

ومما لا شك فيه أن كل الآخرين المعلمات قبل bAutoWidth وaoColumns هي بشكل صحيح entered.Any معلمة خاطئة قبل أن كسر هذه الوظيفة.

Answer 22

وكان لي مشكلة مماثلة وجدت أن النص في أعمدة لا تنكسر واستخدام هذا الرمز المغلق حل المشكلة

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

Answer 23

وهذه هي طريقتي في القيام بذلك ..

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

Answer 24

وأنا واجه نفس المشكلة اليوم.

ولقد استخدمت طريقة صعبة لحلها.

قانون بلدي على النحو التالي.

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

Answer 25

وهذا يعمل بشكل جيد.

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