JQuery / Javascript: Cliente modifica lato di uscita asp.net datagrid per consentire di lavorare tablesorter
-
22-08-2019 - |
Domanda
L'uscita del datagrid asp.net non include gli elementi thead e tbody necessari per la tablesorter jquery lavorare.
es. sembra che questo:
<table>
<tr>this is my header row</tr>
<tr>content row 1</tr>
<tr>content row 2</tr>
<tr>content row 3</tr>
...
<tr>content row n</tr>
</table>
e deve assomigliare a questo:
<table>
<thead>
<tr>this is my header row</tr>
</thead>
<tbody>
<tr>content row 1</tr>
<tr>content row 2</tr>
<tr>content row 3</tr>
...
<tr>content row n</tr>
</tbody>
</table>
ho bussato il seguente javascript per inserirli in modo dinamico, ma il tavolo non è ancora ordinabile. Ho confermato che se inserisco manualmente i tag thead e tbody direttamente nel codice HTML di uscita, il tavolo è ordinabile, ma quando provo a farlo utilizzando il DOM, non sembra funzionare.
Che cosa mi manca?
$(document).ready(function()
{
var tbl = document.getElementById('mytableid');
// new header and body elements to be inserted
var tblHead = document.createElement('thead');
var tblBody = document.createElement('tbody');
// get the first row and the remainder
var headerRow = $(tbl).find('tr:first')
var bodyRows = $(tbl).find('tr:not(:first)');
// remove the original rows
headerRow.remove();
bodyRows.remove();
// add the rows to the header and body respectively
$(tblHead).append(headerRow);
$(tblBody).append(bodyRows);
// add the head and body into the table
$(tbl).append(tblHead);
$(tbl).append(tblBody);
// apply the tablesorter
$(tbl).tablesorter();
}
);
EDIT: ho effettivamente risolto il problema prima che ho postato la domanda, ma ho pensato di andare avanti e post-it in ogni caso, per quanto possa essere utile ad altri ... Vedere la mia risposta qui sotto.
Soluzione
A quanto pare, un elemento fantasma
appare nell'output. Il trucco è quello di garantire che venga rimosso prima di aggiungere a quelli generati ... Speriamo che questo sarà utile a qualcuno! $(document).ready(function()
{
var tbl = document.getElementById('mytableid');
// new header and body elements to be inserted
var tblHead = document.createElement('thead');
var tblBody = document.createElement('tbody');
// get the first row and the remainder
var headerRow = $(tbl).find('tr:first')
var bodyRows = $(tbl).find('tr:not(:first)');
// remove the original rows
headerRow.remove();
bodyRows.remove();
// SOLUTION HERE:
// remove any existing thead/tbody elements
$(tbl).find('tbody').remove();
$(tbl).find('thead').remove();
// add the rows to the header and body respectively
$(tblHead).append(headerRow);
$(tblBody).append(bodyRows);
// add the head and body into the table
$(tbl).append(tblHead);
$(tbl).append(tblBody);
// apply the tablesorter
$(tbl).tablesorter();
}
);
Altri suggerimenti
Il codice di cui sopra ancora non affronta le cellule nell'intestazione. Per convertire loro di tag per i tag è possibile aggiungere questo:
$('thead tr td').each(function(i) {
$(this).replaceWith("<th>" + $(this).html() + "<\/th>");
});