jQuery技术:dataTables.js没有正确resize。 表仍然溢出窗口

我正在使用来自https://datatables.net/的 dataTables.js我也在使用他们的响应式扩展 ,但我无法让表格正确响应resize。 任何见解都会很棒。

桌子溢出窗户。

如果将它完全展开以显示所有列,它甚至不会开始隐藏列,直到第3列关闭屏幕

我用我的代码创建了一个jsfiddle 。

$(document).ready(function() { // Setup - add a text input to each footer cell $('#Table_Assets tfoot th').each(function() { var title = $('#Table_Assets thead th').eq($(this).index()).text(); $(this).html(''); }); // DataTable var table = $('#Table_Assets').DataTable({ responsive: true, "autoWidth": false, "order": [ [13, "desc"] ], initComplete: function() { var r = $('#Table_Assets tfoot tr'); r.find('th').each(function() { $(this).css('padding', 8); }); $('#Table_Assets thead').append(r); $('#search_0').css('text-align', 'center'); }, }); $('#Table_Assets').resize() // Apply the search table.columns().every(function() { var that = this; $('input', this.footer()).on('keyup change', function() { that.search(this.value) .draw(); }); }); }); 
      
Name: Type: Manufacturer Supplier Quantity Serial Number Location: Comments Computer Name Room Number Active Tech Fee Specifications Deploy Date User Department Building Tickets
Doom DOOM! Laptop HP none 33 sdfg sdfg dfhgdfh Nebulus 2345 True True Stuff from space 5/30/2015 Michaels | Joey Staff
No tickets found
Dr. Von Doom Laptop HP none 0 123412341234 Dr. Doom's Lair Spiderman 42 True Spidey sense is tingling. ^_^ 6/18/2015 Michaels | Joey Staff AIC Faculty
No tickets found
Name: Type: Manufacturer Supplier Quantity Serial Number Location: Comments Computer Name Room Number Active Tech Fee Specifications Deploy Date User Department Building Tickets

    我有同样的问题,我正在使用jquery DataTables 1.10.7和扩展响应1.0.6,我通过在_resize函数中的“dataTables.responsive.js”中添加一行来解决,关于第560行。

    添加函数末尾的下一行:

    $(dt.table()节点())removeAttr( ‘风格’)。

    这应该工作。

    function最像这样:

    需要了解更多jQuery教程分享dataTables.js没有正确resize。 表仍然溢出窗口,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!

     _resize: function() { var dt = this.s.dt; var width = $(window).width(); var breakpoints = this.c.breakpoints; var breakpoint = breakpoints[0].name; var columns = this.s.columns; var i, ien; // Determine what breakpoint we are currently at for (i = breakpoints.length - 1; i >= 0; i--) { if (width <= breakpoints[i].width) { breakpoint = breakpoints[i].name; break; } } // Show the columns for that break point var columnsVis = this._columnsVisiblity(breakpoint); // Set the class before the column visibility is changed so event // listeners know what the state is. Need to determine if there are // any columns that are not visible but can be shown var collapsedClass = false; for (i = 0, ien = columns.length; i < ien; i++) { if (columnsVis[i] === false && !columns[i].never) { collapsedClass = true; break; } } $(dt.table().node()).toggleClass('collapsed', collapsedClass); dt.columns().eq(0).each(function(colIdx, i) { dt.column(colIdx).visible(columnsVis[i]); }); $(dt.table().node()).removeAttr('style'); }, 

      以上就是jQuery教程分享dataTables.js没有正确resize。 表仍然溢出窗口相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/982667.html

      (0)
      上一篇 2021年12月13日
      下一篇 2021年12月13日

      精彩推荐