jquery - table header ені дененің енімен сәйкес келмейді

JQuery datatables пайдаланамын. Қолданбаны іске қосқан кезде, тақырып ені дене енімен сәйкес келмейді. Бірақ тақырыпты басқанда, ол дененің еніне сәйкес келеді, бірақ сонда да біршама жеңіл сәйкессіздік бар. Бұл мәселе IE-де ғана кездеседі.

JSFiddle

Бет жүктелген кезде келесідей көрінеді:

enter image description here

Тақырыпты басқаннан кейін:

enter image description here

Менің расталған код:

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": '<"top">rt<"bottom"flp><"clear">',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

rates is my table id.
Could anyone help me with this? Thanks in advance.

38
Мәселені көріп, сынап көру үшін jsFiddle құра аласыз ба? jsfiddle.net
қосылды автор cfs, көзі
кестені жергілікті деректермен бірге күле аласыз ба? aaData параметрін пайдалану арқылы?
қосылды автор cfs, көзі
Скриншоттарды табудан гөрі кодпен жұмыс істеу әлдеқайда оңай болар еді.
қосылды автор cfs, көзі
қосылды автор Suresh Kamrushi, көзі
Мен jsfiddle жасай алмаймын. Менің кодымда кейбір DB-лер тәуелді.
қосылды автор kishore, көзі
Басқа түсініктемедегі html файлын jsfiddle ішінде қосқанмын. Оны тексере аласыз ба?
қосылды автор kishore, көзі
cfs: Скриншоттан біле аласың ба? Мен сондай-ақ, деректер кодын қоса алдық
қосылды автор kishore, көзі
Міне, сондықтан мен скриншотты өзіме қателесіп жатқан жерді білуге ​​болатындай етіп қойдым.
қосылды автор kishore, көзі

23 жауаптар

Мен «dataTable» кестесін overflow: auto div арқылы орап, осы мәселені шештік:

.dataTables_scroll
{
    overflow:auto;
}

және dataTable баптандыруынан кейін осы JS қосуыңыз мүмкін:

jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');

sScrollX немесе sScrollY пайдаланбаңыз, оларды алып тастап, div қаптамасын өзіңіз қосыңыз, ол солай жасайды.

31
қосылды
Мен оны sScrollY-мен жұмыс істеуге тырыстым, бірақ бұл қарапайым CSS шешімі шабуыл жасады.
қосылды автор Jerry, көзі
Сіз сондай-ақ позицияны қосуыңыз керек: тақырыпта салыстырмалы басқаша белгілер қаптаманы жылжытпай-ақ тіркеледі.
қосылды автор alexroat, көзі
Ең қарапайым шешім. Рақмет сізге!
қосылды автор Stephen Lightcap, көзі
Мінсіз жауап .. !! Оны дұрыс деп енгізіңіз. !! Спасибо Sharjeel
қосылды автор Vishvanathsinh Solanki, көзі

НАЗАР АУДАРЫҢЫЗ

Ең алдымен, кесте jQuery DataTables-ды баған енін есептеуге жол бермейтін бастапқыда жасырылған.

SOLUTION

  • If table is in the collapsible element, you need to adjust headers when collapsible element becomes visible.

    For example, for Bootstrap Collapse plugin:

    $('#myCollapsible').on('shown.bs.collapse', function() {
       $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
    });
    
  • If table is in the tab, you need to adjust headers when tab becomes visible.

    For example, for Bootstrap Tab plugin:

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

Жоғарыдағы код беттегі барлық кестелер үшін баған енін реттейді. Қараңыз бағандар (). Adjust() Қосымша ақпарат алу үшін API әдісі.

ЖАУАПКЕРШІЛІК, ШОЛУШЫЛЫҚ НЕМЕСЕ ФИХЕЦКОЛЬМЕНТТЕРДЕ ҰСТАУ

If you're using ЖАУАПКЕРШІЛІК, ШОЛУШЫЛЫҚ НЕМЕСЕ ФИХЕЦКОЛЬМЕНТТЕРДЕ ҰСТАУ, you need to use additional API methods to solve this problem.

СІЛТЕМЕЛЕР

Қараңыз jQuery DataTables - Bootstrap қойындыларымен баған ені мәселелері jQuery DataTables ішіндегі бағандармен ең жиі кездесетін мәселелерді шешу үшін, кесте бастапқыда жасырылған кезде.

18
қосылды
Өте жақсы жауап, +1
қосылды автор NorCalKnockOut, көзі
Өте жақсы жауаптың жақсы үлгісі. Рақмет сізге.
қосылды автор Allen Cypher, көзі

Шешімді тапты:

Кестеге table-layout: fixed қосылды. Бағдарламаны IE режимінде ашты.

16
қосылды
@JaxSwagger - «Бұл бет тек IE-де жұмыс істейтін сынған плагинді пайдаланады» деген хабарды шығарыңыз. Lmao
қосылды автор Hill, көзі
Сіз опцияны қосуды немесе сыныптың атрибуты атауын қосқыңыз келе ме?
қосылды автор Liao San Kai, көзі
Chrome, Firefox, Safari, Opera ішіндегі пайдаланушылар туралы не ...
қосылды автор Shaggy, көзі

Жоғарыда айтылған шешімдердің ешқайсысы мен үшін жұмыс істемеді, бірақ мен шешім қабылдадым.

Бұл мәселенің нұсқасы «box-sizeing» мәнін басқа мәнге орнатқан үшінші тараптың CSS-файлымен байланысты болды. Мен төменде келтірілген кодпен басқа элементтерді қолданбай, мәселені шеше алдым:

    $table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");

Бұл біреуге көмектеседі деген үміттемін!

4
қосылды
Менде iceweasel проблемасы бар (Firefox debianized) ... хроммен тамаша жұмыс істейді
қосылды автор tonjo, көзі
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
        "bSortable": false
    },
    null,
    null,
    null,
    null
]}).fnAdjustColumnSizing( false );

FnAdjustColumSizing (жалған) деп қоңырау шалыңыз datatables қоңырауыңыздың соңына. Жоғарыда өзгертілген код.

Бағанды ​​сұрыптауға арналған талқылау

2
қосылды
Егер бұл сізді түзетпесе, онда мәселені тудыратын кейбір CSS-ті кездейсоқ аласыз. CSS-ді өшіре аласыз ба, алайда жылжыту және баған ені күтілгендей жұмыс істейді.
қосылды автор Mike Ramsey, көзі
Рахмет. Бірақ ол жұмыс істемеді
қосылды автор kishore, көзі

кестенің ені 100% екенін тексеріңіз

Содан кейін «autoWidth»: шын

2
қосылды
Жауабыңызбен дәл кодты беру пайдалы. Javascript/css жауаптары үшін JSFiddle бағаланады.
қосылды автор Suever, көзі

Тек қана кесте тегінің элементін толығымен автоматты түрде және орынға қатысты бөлікте бөліңіз. Ол хроммен және IE8-де жұмыс істейтін болады. Деректерді қайта жүктегеннен кейін тіпті кесте өлшемін сақтау үшін 400px биіктігі қосылды.

table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').appendTo('#candidati').dataTable({
        //"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
        //"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
        "sAjaxSource": "datass.php",
        "aoColumns": colf,
        "bJQueryUI": true,
        "sPaginationType": "two_button",
        "bProcessing": true,
        "bJQueryUI":true,
        "bPaginate": true,
        "table-layout": "fixed",
        "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
            aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
            oSettings.jqXHR = $.ajax({
                "dataType": 'JSON',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            $(nRow).click(function() {
                $(".row_selected").removeClass("row_selected");
                $(this).addClass("row_selected");
                //mostra il detaglio
                showDetail(aData.CandidateID);
            });
        },
        "fnDrawCallback": function(oSettings) {

        },
        "aaSorting": [[1, 'asc']]
}).wrap("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header
1
қосылды
Мен білемін. Infact мен кішкентай жобада қалдырды, онда мен бекітілген басты ұстауым керек плюс жылжымайды. Мен өзімнің үстелімді және әдет-ғұрыптарымды жасауым керек еді
қосылды автор alexroat, көзі
+ 1 бұл жұмыс істейді, бірақ мәселені тыныштамайды, себебі кестенің төменгі жағына жылжытылатын үстіңгі бағанды ​​жоғалтасыз.
қосылды автор Sydwell, көзі

Мен бекітті, мен үшін жұмыс.

var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

Немесе

var table = $('#example').DataTable();
table.columns.adjust().draw();

Reference: https://datatables.net/reference/api/columns.adjust()

1
қосылды

Жоғарыда айтылған шешімдердің ешқайсысы мен үшін жұмыс істемеді, сондықтан менің шешімімді жариялаймын: кестені жасырын дивизияға жүктеп, содан кейін кесте салынғаннан кейін div көрсету. Мен бірінші бөлімді көрсетіп, кестені көрсеткен кезде үстелді салған кезде ол жұмыс істеді.

Осылайша, DataTables жасырын дивизиондағы бағандарды мөлшермен салыстыра алмайды, себебі кесте жасырын болғанда, ол 0px баған енін алады.

1
қосылды

Жауапты Майк Рамсимен байланыстырудан соң, мен DOM жүктегенге дейін үстелдің инициализацияланғанын анықтадым.

Бұны түзету үшін инициализациялау функциясын келесі жерде орналастырдым:

document.addEventListener('DOMContentLoaded', function() {
    InitTables();
}, false);
1
қосылды

контейнер кестесіне тіркелген енін қосу

JS:

otableCorreo = $("#indexTablaEnvios").DataTable({                
    "fnInitComplete": function (oSettings, json) {
        $(otableCorreo.table().container()).addClass("tablaChildren");
    },
});

CSS:

.tablaChildren {
    width: 97%;
}
0
қосылды

Мен бұл ескі екенін білемін, бірақ мен мәселеге жүгірдім және керемет шешім таба алмадым. Сондықтан кестелер биіктігімен салыстырғанда жылжымалағыштың биіктігін алу үшін бірнеше JS пайдалануды шештім. Егер scrollBody кестеден кішірек болса, онда айналдыру жолағына есептелу үшін кесте енін 15px арттырамын. Мен бұны өлшемді өзгерту оқиғасына қойдым, ол менің контейнерім өзгерген кезде жұмыс істейді:

const tableHeight = $('#' + this.options.id).height();
const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height();

if (tableHeight > scrollBodyHeight) {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "calc(100% + 15px)",
    })
} else {
    $('#' + this.options.id).closest('.dataTables_scrollBody').css({
        width: "100%",
    })
}
0
қосылды

Өкінішке орай, осы шешімдердің ешқайсысы маған жұмыс істемеді. Мүмкін, біздің кестелерді баптандырудағы айырмашылыққа байланысты бізде әр түрлі нәтижелер бар. Бұл шешімдердің біреуі біреу үшін жұмыс істейтін шығар. Қалай болғанда да, менің шешімімді бөлісуді жөн көрдім, егер біреу әлі де осы мәселемен алаңдаса. Бұл аздаған хаксис болса да, бірақ ол мен үшін жұмыс істейді, өйткені кейін кестенің енін өзгертпеймін.

Мен бетті жүктегеннен кейін және тақырыпты бассаңыз, ол кеңейтіледі және әдеттегідей көрсетіледі, мен кестенің үстіңгі деректемесін тексеріп, .dataTables_scrollHeadInner divінің енін жазамын. Менің жағдайда 715px , мысалы. Содан соң, ені CSS мәніне қосыңыз:

.dataTables_scrollHeadInner
{
  width: 715px !important;
}
0
қосылды

Менің де осындай мәселе болды. Мен кестелерді кеңейту/жиналмалы панельдерде жасауға болар едім. Кестелер көрінгенше проблема болмады. Бірақ панельді құлатқан болсаңыз, браузерді өзгертіп, содан кейін кеңейтілді, мәселе сонда болды. Мен бұл функция панельді кеңейте отырып, панельдің үстіңгі деректемесі үшін басу функциясына төмендегіні орнатып қойдым:

           //recalculate column widths, because they aren't recalculated when the table is hidden'
            $('.homeTable').DataTable()
                .columns.adjust()
                .responsive.recalc();
0
қосылды

осы шешім бөлімін қараңыз. Оны терезе айналдыру оқиғасы бір уақытта ғана іске қосылады.

0
қосылды

Мен сол мәселеге тап болдым. Мен dataTable үшін scrollX: true сипатын қосып, ол жұмыс істеді. CSS-ны ақпараттармен алмастырудың қажеті жоқ

jQuery('#myTable').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });
0
қосылды
«scrollX»: true қосқан кезде осы мәселені шеше бастадым
қосылды автор Stephen Lightcap, көзі

Менің шешімім мынаған қосылды: ...

initComplete() {
      this.api (). columns (). header (). each ((el, i) => {
          $ (el) .attr ('style', 'min-width: 160px;')
      });
},

...

және бұл жақсы көрінеді.

0
қосылды

Gyrocode.com проблемасына жауап толықтай дұрыс, бірақ оның шешімі барлық жағдайларда жұмыс істемейді. Жалпыға ортақ көзқарас мынада, document.ready функциясының сыртында төмендегілерді қосу керек:

$(document).on( 'init.dt', function ( e, settings ) {
    var api = new $.fn.dataTable.Api( settings );
    window.setTimeout(function() {
            api.table().columns.adjust().draw();
        },1);
} );
0
қосылды

$ ('. DataTables_sort_wrapper'). Триггер («нұқу»);

0
қосылды
Пожалуйста, 4-бос орын/табуляцияны қолданып кодты кодталған блок ретінде пішімдеңіз. Мүмкін сіз кодты түсіндіріп алуыңыз керек, себебі мәселенің қалай байланысты екендігі анық емес, қайда қою керек және т.б.
қосылды автор YakovL, көзі

Тақырыптардағы кейбір қарапайым CSS бұл сізге керек.

#rates_info, #rates_paginate
{
    float: left;
    width: 100%;
    text-align: center;
}

Бұл сіздің html-ті көрмегендіктен, мен оны көрмегендіктен, бұл жұмыс істейтіндігіне уәде бере алмайсыз, егер ол болмаса, html-ті жариялауға болады және мен оны жаңартамын.

0
қосылды
Олар datatables арқылы қосылатын үстіңгі және астыңғы деректемелердің идентификаторлары болып табылады. Менде кездесетін қиындықтар сізде кездесетін мәселені шеше алады.
қосылды автор chockleyc, көзі
Мен оны қосып көрдім. Бірақ сәттілік жоқ
қосылды автор kishore, көзі
«#Rates_info, #rates_paginate» дегеніміз не екенін түсіндіріп беріңізші
қосылды автор kishore, көзі
jsfiddle.net/EjFtX - бұл менің html
қосылды автор kishore, көзі

Gyrocode.com былай деп айтқан: «Сіздің кестеңіз jQuery DataTables-ды баған енін есептеуге кедергі болатын бастапқыда жасырылған.»

Менде бұл мәселе де болды және div-ды көрсеткеннен кейін dataTable-ді ғана бастады

Мысалға

$('#my_div').show();
$('#my_table').DataTable();
0
қосылды

Мұны қолданыңыз: модаль атауын ауыстырыңыз, деректерді тазалаңыз және жүктеңіз

$('#modalCandidateAssessmentDetail').on('shown.bs.modal', function (e) {

});
0
қосылды

Деректер кестесі деректер кестесінің DOM-да жасалмас бұрын шақырылады, деректер кестесін шақырғанға дейін уақытты орнатыңыз.

setTimeout(function(){ 
    var table = $('#exampleSummary').removeAttr('width').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);
0
қосылды