tablesort icon indicating copy to clipboard operation
tablesort copied to clipboard

Not working with my dynamic table updates

Open WebKieth opened this issue 7 years ago • 1 comments

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

WebKieth avatar Mar 02 '18 14:03 WebKieth

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

WebKieth avatar Mar 06 '18 11:03 WebKieth