jQuery डेटाटैब: कंट्रोल टेबल की चौड़ाई

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 का निरीक्षण करते हुए, आप इसे देखते हैं (जोड़ा शैली = "चौड़ाई: 0px;"

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

शैलियों में फायरबग में देख रहे हैं, table.display शैली को ओवरराइड किया गया है। नहीं देख सकता कि यह कहाँ से आ रहा है

element.style {  
  width:0;}    

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

Comments

FYI करें, मुझे बस एक समस्या का सामना करना पड़ा जहां IE8 में एक कॉलम सही ढंग से समायोजित नहीं हो रहा था। अपराधी एक छवि थी जिसमें max-widthसंपत्ति सेट थी। स्पष्ट IE8 उस संपत्ति को बहुत पसंद नहीं करता है और डेटाटैबल्स के संबंध में इसे अनदेखा कर दिया, भले ही छवि स्क्रीन पर कोरक्लेटी आकार थी। इसे बदलकर widthसमस्या को ठीक किया।

— जॉन Bubriski

Answer 1

समस्या इसलिए है क्योंकि डेटाटेबल को इसकी चौड़ाई की गणना करनी चाहिए - लेकिन जब एक टैब के अंदर उपयोग किया जाता है, तो यह दिखाई नहीं देता है, इसलिए चौड़ाई की गणना नहीं कर सकता है। टैब दिखाने पर समाधान को 'fnAdjustColumnSizing' कहा जाता है।

प्रस्तावना

यह उदाहरण दिखाता है कि स्क्रॉल के साथ डेटाटेबल्स को jQuery यूआई टैब (या वास्तव में किसी अन्य विधि के साथ इस्तेमाल किया जा सकता है जिसके तहत तालिका छिपी हुई है (प्रदर्शन: कोई नहीं) तत्व जब इसे प्रारंभ किया जाता है)। इसका कारण विशेष रूप से विचार करने की आवश्यकता है, यह है कि जब डेटाटेबल्स को आरंभीकृत किया जाता है और यह एक छिपे हुए तत्व में होता है, तो ब्राउज़र के पास कोई माप नहीं होता है जिसके साथ डेटाटेबल्स दिया जा सके, और स्क्रॉलिंग सक्षम होने पर स्तंभों के मिसलिग्न्मेंट में इसकी आवश्यकता होगी।

इसके आस-पास जाने की विधि 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 ] }
        ]
    } );
} );

अधिक जानकारी के लिए इसे देखें ।

Comments

मेरे पास @John मैक के साथ भी यही मुद्दा है, हालांकि, मैंने अपने डायटिटेबल को एक मोडल पर लागू किया, मैं बूटस्ट्रैप का उपयोग कर रहा हूं और मैं इस मुद्दे के साथ फंस गया हूं। लेकिन आप जानते हैं कि टैब के बजाय बूटस्ट्रैप मोडल का उपयोग करके इसे कैसे लागू किया जाए। .i को वास्तव में आपकी सहायता की आवश्यकता है

— cfz

मैं उपयोग करने की सलाह देता हूं window.resize, एक उदाहरण देखिए legacy.datatables.net/ref#fnAdjustColumnSizing

— KingRider

"aoColumnDefs": [{"sWidth": "10%", "aTargets": [-1]}]। मैं अपनी समस्या को ठीक करता हूं बस इसे जोड़ें, धन्यवाद।

— मीना ने

Answer 2

जब आप डेटाटेबल्स को इनिशियलाइज़ करते हैं तो आप दो वैरिएबल को ट्वीक करना चाहेंगे: bAutoWidthऔरaoColumns.sWidth

मान लें कि आपके पास 50 कॉलम, 100, 120px और 30px की चौड़ाई के साथ 4 कॉलम हैं:

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

डेटाटेबल्स के आरंभीकरण के बारे में अधिक जानकारी http://datatables.net/usage पर देखी जा सकती है

विधवाओं की इस सेटिंग और आपके द्वारा लागू सीएसएस के बीच बातचीत के लिए देखें। यह देखने की कोशिश करने से पहले आप अपने मौजूदा सीएसएस पर टिप्पणी कर सकते हैं।

Comments

mmm। आप जो कह रहे हैं कि यह bAutoWidth का परिणाम है: स्तंभ चौड़ाई के लिए विशेष रूप से बुद्धिमान विकल्प नहीं है।

— जॉन मैक

मैं ऐसा सोचता हूं। यदि डेटा में लंबाई असंगत है, तो मेरी तालिकाएँ चारों ओर उछलती हैं। यही कारण है कि मैं aoColumns और bAutoWidth मापदंडों में डालता हूं।

— आर्टलंग

सुंदर। पूरी तरह से मेरा मुद्दा तय किया।

— लगुना

बहुत बढ़िया @Laguna! इस तरह के पुराने जवाबों को सुनना मददगार साबित होता है।

— आर्टलंग

"ब्यूटोविदथ": झूठे काम। लेकिन सिर्फ एक सवाल। क्या यह एक अच्छा अभ्यास है या नहीं अगर मैं अपने <th> टैग्स पर चौड़ाई विवरण डालूं?

— finnTheHumin

Answer 3

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

Comments

यह मेरे लिए सही जवाब था। मैं बूस्टर का उपयोग कर रहा हूँ। डेटाटेबल कोड सेटिंग के साथ इसकी खुद की चौड़ाई है, यह रास्ते में मिलती है।

— 15106 पर mac10688

इस बेवकूफ समस्या के लिए अपना समाधान पोस्ट करने के लिए यहां आया था जिसमें टैब परिवर्तन घटना पर चौड़ाई की संपत्ति को हटाने के लिए शामिल था, लेकिन ऐसा लगता है कि यह तय हो गया है। धन्यवाद। +1

— टोपेर

मेरे पास पहले दो टैब पर 3 टैब और डेटाटैबल्स हैं, दूसरे टैब पर टेबल पूरी चौड़ाई नहीं थी। इससे मेरी समस्या ठीक हो गई। धन्यवाद

— बजे माइक वोल्मार

Answer 4

ठीक है, मैं उस प्लगइन से परिचित नहीं हूं, लेकिन क्या आप डिटैचेबल को जोड़ने के बाद स्टाइल को रीसेट कर सकते हैं? कुछ इस तरह

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

-dataTable कॉल के बाद?

Comments

मैं ने पाया है यह सबसे अच्छा समाधान के रूप में अच्छी तरह से हो सकता है, क्योंकि मेरे मामले में, टेबल भी सेट किया जा रहा है 100px चौड़ाई के लिए गया था जब से कोई भी कॉलम अदृश्य बनाया गया था - देखें यहाँ: datatables.net/forums/discussion/3417/...

— mydoghasworms

यह वह उपाय है जो मेरे लिए काम करता है। यह oTable.fnAdjustColumnSizing () की तुलना में डेटा तालिका के सीएसएस पर बेहतर नियंत्रण देता है; समाधान पहले उल्लेख किया है।

— विजय रुमाओ

Answer 5

डेटाटेबल्स की कॉलम चौड़ाई के साथ मेरे पास कई मुद्दे हैं। मेरे लिए मैजिक फिक्स लाइन सहित था

table-layout: fixed;

यह सीएसएस तालिका के समग्र सीएसएस के साथ जाता है। उदाहरण के लिए, यदि आपने निम्नलिखित की तरह डेटापाले घोषित किया है:

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

तब मैजिक css लाइन क्लास लोडटेबल में जाएगी

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

}

Comments

यह मदद करता है, लेकिन अब मेरे कॉलम सभी अजीब आकार के हैं। मुझे उम्मीद होगी कि सबसे अधिक डेटा वाले कॉलम सबसे बड़ी प्रतिशत चौड़ाई लेंगे।

— cjbarth

Answer 6

TokenMacGuys समाधान सबसे अच्छा काम करता है क्योंकि यह jQdataTable में बग का परिणाम है। यदि आप $ ('# someabe') का उपयोग करते हैं तो क्या होता है। डेटाटेबल ()। FnDestroy () तालिका की चौड़ाई 100% के बजाय 100px पर सेट हो जाती है। यहाँ एक त्वरित तय है:

$('#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

इस css क्लास को अपने पेज में जोड़ें, इससे समस्या ठीक हो जाएगी:

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

Comments

मेरे पास एक अलग मुद्दा था जो मैं पिछले 30 मिनट से लड़ रहा था - कोड की इस लाइन ने इसे ठीक कर दिया - इसलिए मैं सिर्फ इस यादृच्छिक टिप्पणी के लिए धन्यवाद कहना चाहता था।

— user1274820

यही कारण है कि मैं अतिरिक्त जवाब देता हूं

— बहादुर तसदीम

Answer 8

sWidthप्रत्येक कॉलम के लिए और इनिशियलाइज़ेशन bAutoWidth: falseमें स्पष्ट रूप से उपयोग की जाने वाली चौड़ाई सेट करना dataTableमेरी (समान) समस्या को हल करता है। अतिप्रवाह ढेर से प्यार करें।

Answer 9

आपको निश्चित फ़ील्ड के बिना कम से कम एक फ़ील्ड छोड़ना होगा, उदाहरण के लिए:

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

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

आप सभी को बदल सकते हैं, लेकिन केवल एक को शून्य के रूप में छोड़ सकते हैं, इसलिए यह खिंचाव कर सकता है। यदि आप सभी पर चौड़ाई डालते हैं तो यह काम नहीं करेगा। आशा है कि मैंने आज किसी की मदद की!

Comments

यह मेरे लिए था, मैं 1px के लिए सभी कॉलम सेट कर रहा था। एक को छोड़कर इसे जादुई काम बना दिया। धन्यवाद!

— दानवकुंडनी

Answer 10

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

यह पूरी तालिका चौड़ाई को समायोजित करने के लिए ठीक काम किया। साभार @Peter Drinnan!

Comments

मुझे इसके मूल कंटेनर को ठीक से भरने के लिए तालिका नहीं मिल सकी। तालिका के सीएसएस को समायोजित करने की कोशिश की और इसकी आवरण की चौड़ाई: 100%; ध्यान देने योग्य अंतर के साथ। एक बार जब मैंने उपर्युक्त विधि की कोशिश की, तो यह चमत्कार काम कर गया, हालाँकि मैं आवरण को इंगित नहीं कर रहा था, इसके बजाय मुझे उस तालिका को इंगित करना पड़ा, जो स्वयं है। लेकिन बड़ा धन्यवाद निलानी !!

— तर्क 1

Answer 11

डेटेबल 10.1 पर, यह सीधे आगे है। बस HTML में अपनी टेबल पर चौड़ाई विशेषता रखो। यानी चौड़ाई = "100%", यह डीटी द्वारा निर्धारित सभी सीएसएस शैलियों को ओवरराइड करेगा।

इसे देखें http://www.datatables.net/examples/basic_init/flexible_width.html

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

केवल यह कहने के लिए कि मुझे आपके समान ही समस्या है, हालाँकि मैं JQuery को बिना किसी अजाक्स के एक सामान्य टेबल पर लागू कर रहा था। किसी कारण के लिए फ़ायरफ़ॉक्स खुलासा करने के बाद तालिका का विस्तार नहीं करता है। मैंने एक DIV के अंदर टेबल लगाकर समस्या को ठीक किया, और इसके बजाय DIV पर प्रभाव लागू किया।

Answer 14

क्या आप तैयार घटना में ऐसा कर रहे हैं?

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () {...});

नौकरशाही का आकार पूरी तरह से लोड होने वाले दस्तावेज़ पर निर्भर होने की संभावना है।

Comments

ऊपर एक कोड देखो - यह div कंटेनर # टैब-डेटासेट के अजाक्स लोड से कॉलबैक में हो रहा है। तालिका #querytableDatasets / cgi-bin / qryDatasets द्वारा प्रदान की जाती है

— जॉन मैक

मैं समझता हूं कि, मुझे उस समय के बारे में निश्चित नहीं है। प्लगइन स्रोत को देखने में, ऐसा लग रहा था कि यह केवल 0px चौड़ाई निर्धारित कर सकता है, जब यह सही तालिका offSetWidth निर्धारित नहीं कर सका और मुझे लगा कि यह बहुत जल्दी चलने से संबंधित है।

— मुफ्का

हम्म। मैंने मान लिया है कि अजाक्स लोड से कॉलबैक को #querytableDatasets लोड होने के बाद कहा जाता है। क्या आपको लगता है कि ऐसा नहीं हो सकता है?

— जॉन मैक

BTW आपके सवाल का जवाब देने के लिए कि यह कब चलता है, यह बटन क्लिक करने वाले उपयोगकर्ता की प्रतिक्रिया में है

— जॉन मैक

हम्म, मुझे यकीन नहीं है कि मैं कुछ और जोड़ सकता हूं। यदि यह एक बटन क्लिक है, तो दस्तावेज़ पूरी तरह से भरा हुआ है और इसे तैयार घटना में डालने का कोई कारण नहीं है। आप टेबल के कंटेनर की चौड़ाई के साथ चारों ओर खेल सकते हैं या अपने वर्तमान लेआउट के बाहर उनके (डेटाटेबल प्लगइन) काम करने की कोशिश कर सकते हैं।

— मुफ्का

Answer 15

फिक्स्ड हेडर प्लगइन का उपयोग करके किसी को भी टेबल / सेल की चौड़ाई को समायोजित करने में परेशानी होती है:

डेटाटैबल्स कॉलम चौड़ाई पैरामीटर के लिए थ्रेड टैग पर निर्भर करता है। ऐसा इसलिए है क्योंकि इसकी वास्तव में एकमात्र देशी html है क्योंकि तालिका का अधिकांश आंतरिक html स्वतः उत्पन्न होता है।

हालाँकि, क्या होता है, आपके सेल में से कुछ थ्रेड कोशिकाओं के अंदर संग्रहीत चौड़ाई से बड़ा हो सकता है।

Ie यदि आपकी टेबल में बहुत सारे कॉलम (चौड़ी टेबल) हैं और आपकी पंक्तियों में बहुत अधिक डेटा है, तो "sWidth" को कॉल करना: td सेल का आकार बदलने के लिए ठीक से काम नहीं करना चाहिए क्योंकि चाइल्ड रो स्वचालित रूप से ओवरफ्लो के आधार पर td का आकार बदल रहा है। कंटेंट और यह तब होता है जब टेबल को इनिशियलाइज़ कर दिया जाता है और उसके इनिट परमेस को पास कर दिया जाता है।

मूल थ्रेड "sWidth": पैरामीटर ओवरराइड हो जाते हैं (सिकुड़ जाते हैं) क्योंकि डेटाटैबल्स को लगता है कि आपकी तालिका में अभी भी इसकी डिफ़ॉल्ट चौड़ाई 100% है - यह नहीं पहचानता है कि कुछ सेल अतिप्रवाहित हैं।

इसे ठीक करने के लिए मैंने ओवरफ्लो की चौड़ाई का पता लगाया और तालिका के अनुसार तालिका को आकार देने के बाद इसका आकार बदलकर हिसाब किया - जब तक हम इस पर हैं, हम एक ही समय में अपने निश्चित हेडर में प्रवेश कर सकते हैं:

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

Answer 16

अपने ajax कॉल की "सफलता" के अंदर अपना फ़ाइटहेडर बनाएं, आपको हेडर और पंक्तियों में कोई संरेखण समस्या नहीं होगी।

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>

डेटाटैबल्स बल चौड़ाई तालिका

Answer 19

मैं एक समान मुद्दे में भाग गया जब एक मेज के चारों ओर लिपटा हुआ था।

स्थिति जोड़ना: मेरे लिए रिश्तेदार ने इसे ठीक किया।

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

Answer 20

मेरे पास एक समान मुद्दा था जहां तालिका की सामग्री तालिका शीर्ष लेख और पाद लेख से बड़ी थी। तालिका के चारों ओर एक div जोड़ना और x- अतिप्रवाह स्थापित करना इस समस्या को हल करता है:

Answer 21

सुनिश्चित करें कि bAutoWidth और anoColumns से पहले अन्य सभी पैरामीटर सही ढंग से दर्ज किए गए हैं। इससे पहले कि कोई गलत पैरामीटर इस कार्यक्षमता को तोड़ देगा।

Answer 22

मुझे भी ऐसी ही समस्या थी और पाया गया कि कॉलम में टेक्स्ट टूटता नहीं है और इस css कोड के इस्तेमाल से समस्या हल हो जाती है

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

इस समाधान की भी जाँच करें। इससे मेरी डेटाटेबल कॉलम चौड़ाई समस्या आसानी से हल हो गई

JQuery के डेटाटेबल्स 1.10.20 में columns.adjust()विधि का परिचय दिया गया है जो बूटस्ट्रैप को टैब समस्या को ठीक करता है

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

कृपया दस्तावेज़ देखें: स्क्रॉलिंग और बूटस्ट्रैप टैब

Answer 26

यह ठीक काम करता है।

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