标题搞砸应用tablesorter插件

I applied widget-scroller and widget column Selector in my table using table sorter plugin in jQuery.

我使用jQuery中的表分类器插件在我的表中应用了widget-scroller和widget列Selector。

Did anyone have a experience like this picture? Seem like my table headers not match with the columns and messing. I'm using the latest one and using theme.blue. Did I missing something here? I googled a lot but still not resolve my problem.

有没有人有这样的经历?好像我的表头不匹配列和乱码。我正在使用最新的一个并使用theme.blue。我在这里遗失了什么吗?我google了很多但仍未解决我的问题。

标题搞砸应用tablesorter插件

Please help. Any answer will be appreciated.

请帮忙。任何答案将不胜感激。

[Update] this is my code to generate table :

[更新]这是我生成表的代码:

$.ajax({
            type:"POST",
            url:"../cdc/load/jsonTrack.php?",
            data:dataString,
            dataType: 'json',
            success: function(data){
                if(data.status === "success") { 
                    var elements = data.elements; 
                    if(elements.length === 0) {
                        $('#cdcTracking-list tbody').append( '<tr>' +
                            '<td colspan="7">No session to display</td>' +
                            '</tr>');
                    }
                    for( var i = 0; i < elements.length; i++){
                        var element = elements[i];

                        //console.log('session id:' + element.vesselCode);
                        $('#cdcTracking-list tbody').append( '<tr>' +
                            '<td style="color: green;">' + element.vesselCode + '</td>' +
                            '<td style="color: black;">' + element.voyage + '</td>' +
                            '<td style="color: black;">' + element.chasisNo + '</td>' +
                            '<td style="color: blue;">' + element.plateNo + '</td>' +
                            '<td style="color: blue;">' + element.bookingRef + '</td>' + 
                            '<td style="color: blue;">' + element.serviceTerm +'</td>'+
                            '</tr>'                                    
                        );
                    }
                }else { 
                    $('#cdcTracking-list tbody').append( '<tr><td colspan="7">No session to display</td></tr>');
                }
            }
        });

HTML header :

HTML标题:

                <table id="cdcTracking-list" class="tablesorter-blue custom-popup" border="0" data-mode="columntoggle">
                    <thead>
                        <tr>
                            <th align="center">Vessel </th>
                            <th align="center">Voyage </th>
                            <th align="center">Chasis No</th>
                            <th align="center">Plate</th>
                            <th align="center" >Booking Ref</th>
                            <th align="center" >Service Term</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

and this is tablesorter Javascript:

这是tablesorter Javascript:

$("#cdcTracking-list").tablesorter({
                    widthFixed: false,
                    showProcessing: true,
                    headerTemplate: '{content} {icon}',
                    widgets: ['zebra', 'scroller', 'columnSelector'],
                    widgetOptions: {
                        columnSelector_container: $('#columnSelector'),
                        columnSelector_columns: {
                            0: ['disable'] /* set to disabled; not allowed to unselect it */
                        },
                        columnSelector_saveColumns: true,
                        columnSelector_layout: '<label><input type="checkbox">{name}</label>',
                        columnSelector_name: 'data-selector-name',
                        columnSelector_mediaquery: true,
                        columnSelector_mediaqueryName: 'Auto: ',
                        columnSelector_mediaqueryState: true,
                        columnSelector_breakpoints: ['20em', '30em', '40em', '50em', '60em', '70em'],
                        columnSelector_priority: 'data-priority',
                        scroller_height: 300,
                        scroller_barWidth: 18,
                        scroller_upAfterSort: true,
                        scroller_jumpToHeader: true,
                        scroller_idPrefix: 's_'
                    }
                }).tablesorterPager(pagerOptions);

1 个解决方案

#1

On the sample here: http://mottie.github.io/tablesorter/docs/example-widget-scroller.html It looks like the version of jQuery is 1.4.4. You may try loading that version to see if it helps. I tried that version and the columns lined up but it broke some of my other code, so I went back to the newest jQuery. What ended up working for me is to get rid of fixed column widths and use percentages set in the header like: <th style="width:10%"> for the first couple of columns, then the rest seemed to line up okay.

在这里的示例:http://mottie.github.io/tablesorter/docs/example-widget-scroller.html看起来jQuery的版本是1.4.4。您可以尝试加载该版本以查看它是否有帮助。我尝试了那个版本和列排列但是它打破了我的其他代码,所以我回到了最新的jQuery。最终为我工作的是摆脱固定的列宽并使用标题中设置的百分比,例如:对于前几列,其余的似乎排队好了。

秒客网

标题搞砸应用tablesorter插件

1 个解决方案

#1

#1

相关文章