AJAX appended collapsible rows to a jQuery/javascript Tablesorter table lack needed attributes

I'm trying to append rows upon scrolling of a table using a modified version of Tablesorter.js: http://www.pengoworks.com/workshop/jquery/tablesorter/tablesorter.htm. It is modified in the sense that it allows for collapsible rows. The problem I'm having is that upon scrolling and an AJAX call to load new rows, these new rows are lacking the attributes of the other rows that allow them to be toggleably collapsed/expanded. Here's some issues with the HTML for these appended rows: 1. the clickable `` tag class name isn't being toggled from "expanded" to "collapsible" 2. the toggled `` columns style attributes aren't defaulting to `"display:none"` and don't toggle to `"display: table-cell"`. Here's the JS to trigger AJAX request upon scrolling and for Tablesorter. I've kept the HTML exactly as in the demo in the pengoworks.com link i mentioned above. $(function(){ $(document).endlessScroll({ callback: function(i) { loaded += 10; $.post("/more/" + loaded, function(data){ $("#table"+ " tbody").append(data); $("#table").trigger("update"); }); } }); $("#table").collapsible("td.collapsible", { collapse: true }).tablesorter({ sortList: [[1,0]], headers: {0: {sorter: false}} , widgets: ['zebra'] , onRenderHeader: function (){ this.wrapInner(""); } }); }); **UPDATE** Please see the following jsfiddle which aims to get at AJAXifying the collapsible tablesorter table: http://jsfiddle.net/Lcztc/8. It's not true AJAX but you get the idea. Also, here's a link to the collapsible.js code: http://www.pengoworks.com/workshop/jquery/tablesorter/jquery.tablesorter.collapsible.js. According to Amar (see below), It is pretty clear I need to fix the parts of that plugin that relate to table element bindings such that they recognize appended elements. Unfortunately, the above jsfiddle still has 2 major issue with it: 1) the collapsibility of the original rows is lost every other time you click the "clickAJAX" button; 2) appended rows are never collapsible or expandable. Still some progress...
thanks Richard, i just updated my question, see above...

以上就是AJAX appended collapsible rows to a jQuery/javascript Tablesorter table lack needed attributes的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准