动态创建Tablesorter不起作用 [英] Dynamically created Tablesorter not working

问题描述

已更新：请查看 小提琴 ：

我想为动态创建的表使用tablesorter和它的sticky头插件。但是，尽管包含了 $（'。tablesorter'），但我仍然无法使代码运行。trigger（'updateAll'）; 和 $ （.tablesorter）。tablesorter（options）; 在循环结尾。

任何人都可以指出以下错误代码？

  var options = {
 widthFixed：true，
 showProcessing：true，
 headerTemplate：'{content} {icon}'，//为jui主题添加图标;新的v2.7！ 
 
 widgets：['uitheme'，'zebra'，'stickyHeaders'，'filter']，
 $ b $ widgetOptions：{
 
 // extra添加到粘性标题行的类名
 stickyHeaders：''，
 //数字或jquery选择器定位位置：固定元素
 stickyHeaders_offset：0，
 //添加到表中ID，如果它存在
 stickyHeaders_cloneId：'-sticky'，
 //在头部触发resize事件
 stickyHeaders_addResizeEvent：true，
 //如果存在false和标题，它不会被包含在粘头中
 stickyHeaders_includeCaption：true，
 // stickyHeaders的zIndex，允许用户根据自己的需要调整
 stickyHeaders_zIndex：2，
 // jQuery选择器或对象将粘性头添加到
 stickyHeaders_attachTo：null，
 //过滤
后将表顶部滚动到视图中
 stickyHeaders_filteredToT op：true，
 
 //使用内容和默认样式添加斑马条纹 -  ui css将背景从默认
中删除//此演示中包含的偶数和奇数类名称允许切换主题
 zebra：[ui-widget-content even，ui-state-default odd]，
 //使用uitheme小部件应用defauly jquery ui（jui）class names 
 //有关如何更改类名的更多详细信息，请参阅uitheme演示
 uitheme：'jui'
} 
 
}; 
 
 
 
 
 
 var data = [{
 number：'1'
}，{
 number ：'2'
}，{
编号：'3'
}，{
编号：'4'
}，{
编号：' 5'
}，{
编号：'6'
}，{
编号：'7'
}，{
编号：'8' 
}，{
 number：'9'
}，{
 number：'10'
}]; 
 var chunks = []; 
 var item_html =; 
 for（var i = 0; i< data.length;）{
 chunks.push（data.slice（i，i + = 3））; 
} 
 for（var i = 0; i< chunks.length; i ++）{
 
 item_html + =< table class ='tablesorter'>< THEAD>< TR>中; 
 
 chunks [i] .map（function（v，key）{
 item_html + =< th> + key +< th>; 
 }）; 
 item_html + =< / tr>< / thead>< tbody>< tr>; 
 
 chunks [i] .map（function（v）{
 item_html + =< td>+ v.number +< / td>; 
 }）; 
 
 item_html + =< / tr>< / tbody>< / table>; 
 $（。tablesorter）。tablesorter（options）; 
 
 $（'。tablesorter'）。trigger（'updateAll'）; 
 
 
 $ b $（'＃area'）。append（item_html）
  

解决方案

问题是在不存在的元素上调用tablesorter。

移动在HTML附加到区域后调用 $（。tablesorter）。tablesorter（options）; DIV。根本不需要 updateAll 方法（ demo a>）：

  chunks [i] .map（function（v）{
 item_html + =< td>+ v.number +< / td>; 
}）; 
 
 item_html + =< / tr>< / tbody>< / table>; 
 // $（。tablesorter）。tablesorter（options）; 
 $ b $ // $（'。tablesorter'）。trigger（'updateAll'）; 
 
 
 
 $（'＃area'）。append（item_html）; 
 $（。tablesorter）。tablesorter（options）; 
  

Updated: Please take a look at this fiddle:

I want to use the tablesorter and its sticky header plugin for the dynamically created tables. But I have trouble getting the code to work, despite the inclusion of $('.tablesorter').trigger('updateAll'); and $(".tablesorter").tablesorter(options); at the end of the loop.

Can anyone point out what's wrong with the following code?

  var options = {
    widthFixed : true,
    showProcessing: true,
    headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!

    widgets: [ 'uitheme', 'zebra', 'stickyHeaders', 'filter' ],

    widgetOptions: {

      // extra class name added to the sticky header row
      stickyHeaders : '',
      // number or jquery selector targeting the position:fixed element
      stickyHeaders_offset : 0,
      // added to table ID, if it exists
      stickyHeaders_cloneId : '-sticky',
      // trigger "resize" event on headers
      stickyHeaders_addResizeEvent : true,
      // if false and a caption exist, it won't be included in the sticky header
      stickyHeaders_includeCaption : true,
      // The zIndex of the stickyHeaders, allows the user to adjust this to their needs
      stickyHeaders_zIndex : 2,
      // jQuery selector or object to attach sticky header to
      stickyHeaders_attachTo : null,
      // scroll table top into view after filtering
      stickyHeaders_filteredToTop: true,

      // adding zebra striping, using content and default styles - the ui css removes the background from default
      // even and odd class names included for this demo to allow switching themes
      zebra   : ["ui-widget-content even", "ui-state-default odd"],
      // use uitheme widget to apply defauly jquery ui (jui) class names
      // see the uitheme demo for more details on how to change the class names
      uitheme : 'jui'
    }

  };





var data = [{
    number: '1'
}, {
    number: '2'
}, {
    number: '3'
}, {
    number: '4'
}, {
    number: '5'
}, {
    number: '6'
}, {
    number: '7'
}, {
    number: '8'
}, {
    number: '9'
}, {
    number: '10'
}];
var chunks = [];
var item_html = "";
for (var i = 0; i < data.length;) {
    chunks.push(data.slice(i, i += 3));
}
for (var i = 0; i < chunks.length; i++) {

    item_html += "<table class='tablesorter'><thead><tr>";

    chunks[i].map(function (v, key) {
        item_html += "<th>" + key + "</th>";
    });
    item_html += "</tr></thead><tbody><tr>";

    chunks[i].map(function (v) {
        item_html += "<td>" + v.number + "</td>";
    });

    item_html += "</tr></tbody></table>";
    $(".tablesorter").tablesorter(options);    

    $('.tablesorter').trigger('updateAll');

}

$('#area').append(item_html)

解决方案

The problem is that tablesorter is being called on elements that don't exist.

Move the $(".tablesorter").tablesorter(options); to be called after the HTML has been appended to the area div. The updateAll method isn't needed at all (demo):

    chunks[i].map(function (v) {
        item_html += "<td>" + v.number + "</td>";
    });

    item_html += "</tr></tbody></table>";
    // $(".tablesorter").tablesorter(options);    

    // $('.tablesorter').trigger('updateAll');

}

$('#area').append(item_html);
$(".tablesorter").tablesorter(options);

这篇关于动态创建Tablesorter不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！