tablesort
tablesort copied to clipboard
Not working with my dynamic table updates
Hello, I have got a trouble with table sorting updates. I wrote a dynamic table with inner tables. It get data in json and append cells after ajax. I initialize sorting on first time load and refresh it when user request inner tables:
if !jsonTable.isTableSorted
jsonTable.sorterObj = tablesort(table.find('table').get(0), {
emptyTo: 'none'
})
jsonTable.isTableSorted = true
else
jsonTable.sorterObj.refresh()
After the first initializing plugin works good, but when i request inner data and create inner table under the relative row, I catch an error: Uncaught TypeError: Cannot read property 'getAttribute' of undefined at getInnerText (tablesort.js:27) at Tablesort.sortTable (tablesort.js:208) at HTMLTableCellElement.onClick (tablesort.js:107) I check source code by debugger. On this step:
newRows.push({
tr: item,
td: getInnerText(item.cells[that.col]),
index: totalRows
});
item.cells[that.col] will be undefined when cycle of sorting try to find cell into my inner table construction:
initSpoilers: (jsonurl, parentRow) ->
$("<tr class='table__row table__row--table-inside'></tr>").insertAfter(parentRow)
rowTableInside = parentRow.siblings(".table__row--table-inside")
rowTableInside.append("
<td colspan='100' style='background-color: #f5f5f5; padding: 0'>
<div class='table table--report-cellgrid json-table'>
<table class='table__table table__table--insided'>
<tbody class='table__body table__body--cell-nowrap json-table__body'></tbody>
</table>
<div class='table__pagination table__pagination--start-x' style='display: none'>
<div class='table__counter'>
<div class='table__current-count'></div>
<div class='table__of'>из</div>
<div class='table__total-count'></div>
</div>
<div class='table__nav'>
<div class='table__chev table__chev--disabled table__chev--total-start'></div>
<div class='table__chev table__chev--disabled table__chev--prev'></div>
<div class='table__chev table__chev--next'></div>
<div class='table__chev table__chev--total-end'></div>
</div>
</div>
</div>
</td>")
I think i need to change cell founding action... pls, help
I solve a problem with inner tables sorting by creating and triggering hidden inner headers:
#table - current instance of table, which eat json table data
jsonTable.sorterObj = tablesort(table.find('table').get(0))
mainHeader = $( $(".#{jsonTable.moduleName}--main").find(".#{jsonTable.moduleName}__headers").get(0) )
if isInner
mainHeaderCells = mainHeader.find '.table__cell'
innerHiddenCells = headers.find '.table__cell'
mainHeaderCells.click ->
that = $ this
index = that.index()
$(innerHiddenCells[index]).trigger('click')
But sometimes with two or more opened inners I still get an error Cannot read property 'getAttribute' into getInnerText function from this row: item = getInnerText(that.table.tBodies[0].rows[i].cells[column]); It shouldn't be nappen - I set attribute data-sort-method='none' for table rows with inner table