nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

sort table columns without requerying

bugsy

<p>Does anyone know of a way to sort table columns (asc & desc) without having to rerun the query?</p>
<p> </p>
<p>Javascript? Or maybe something that works like jquery datatables? I have been researching this an have come up empty.</p>
<p> </p>
<p>Ideas appreciated.</p>

Find more posts tagged with

Comments

lu.duverger

<p>Hi Budsy, I'm also seeking for a .rptdesign example to get to use jquery datables in BIRT.</p>
<p>It's hard to find any information on the net.</p>
<p>Did you get anything yet? Tx for your reply. Regards, Lucie D</p>

lu.duverger

<p>Hi again. I succeeded in setting the DataTables jQuery on my report at last. I do hope it will help anyone

</p>
<ol><li>Add a <strong><em>clientInitialize </em></strong>script to your report with the following code:<br><em><span style="color:#0000ff;">head.js("<a data-ipb='nomediaparse' href='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'>https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js","//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css","//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js");</a></span></em></li>
<li>Set a <em><strong>bookmark </strong></em>to your table<br>
For example, <span style="color:#0000ff;"><em>"myTableID"</em></span></li>
<li>Add a <em><strong>HTML text</strong></em> at the end of the report<br>
For example, the following code will set the first line of my table as a header (thead) and the last as footer (tfoot) and translate some options in French. <br><div><span style="color:#0000ff;"><em><script></em></span></div>
<div><span style="color:#0000ff;"><em>var jQuery='';</em></span></div>
<div><span style="color:#0000ff;"><em>head.load("//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css","//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js",function(){</em></span></div>
<div><span style="color:#0000ff;"><em> console.log("DataTables framework loaded...");</em></span></div>
<div><span style="color:#0000ff;"><em> $('<thead></thead>').prependTo('#myTableID').append($('#myTableID tr:first'));</em></span></div>
<div> </div>
<div><span style="color:#0000ff;"><em>console.log($('#myTableID')[0].outerHTML);</em></span></div>
<div><span style="color:#0000ff;"><em> $('<tfoot></tfoot>').prependTo('#myTableID').append($('#myTableID tr:last'));</em></span></div>
<div> </div>
<div><span style="color:#0000ff;"><em>console.log($('#myTableID')[0].outerHTML);</em></span></div>
<div><span style="color:#0000ff;"><em> $("#myTableID").DataTable(</em></span></div>
<div><span style="color:#0000ff;"><em> {</em></span></div>
<div><span style="color:#0000ff;"><em> "paging": false,</em></span></div>
<div><span style="color:#0000ff;"><em> language: {</em></span></div>
<div><span style="color:#0000ff;"><em> processing: "Traitement en cours...",</em></span></div>
<div><span style="color:#0000ff;"><em> search: "Rechercher / Filtrer :",</em></span></div>
<div><span style="color:#0000ff;"><em> lengthMenu: "Afficher _MENU_ éléments",</em></span></div>
<div><span style="color:#0000ff;"><em> info: "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",</em></span></div>
<div><span style="color:#0000ff;"><em> infoEmpty: "Affichage de l'élement 0 à 0 sur 0 éléments",</em></span></div>
<div><span style="color:#0000ff;"><em> infoFiltered: "(filtré de _MAX_ éléments au total)",</em></span></div>
<div><span style="color:#0000ff;"><em> infoPostFix: "",</em></span></div>
<div><span style="color:#0000ff;"><em> loadingRecords: "Chargement en cours...",</em></span></div>
<div><span style="color:#0000ff;"><em> zeroRecords: "Aucun élément à afficher",</em></span></div>
<div><span style="color:#0000ff;"><em> emptyTable: "Aucune donnÃ©e disponible dans le tableau",</em></span></div>
<div><span style="color:#0000ff;"><em> paginate: {</em></span></div>
<div><span style="color:#0000ff;"><em> first: "Premier",</em></span></div>
<div><span style="color:#0000ff;"><em> previous: "Précédent",</em></span></div>
<div><span style="color:#0000ff;"><em> next: "Suivant",</em></span></div>
<div><span style="color:#0000ff;"><em> last: "Dernier"</em></span></div>
<div><span style="color:#0000ff;"><em> }</em></span></div>
<div><span style="color:#0000ff;"><em>}</em></span></div>
<div><span style="color:#0000ff;"><em>}</em></span></div>
<div><span style="color:#0000ff;"><em> ); //"myTableID" should be the bookmark of the table</em></span></div>
<div><span style="color:#0000ff;"><em> console.log("Interactive table is ready!"); </em></span></div>
<div><span style="color:#0000ff;"><em>});</em></span></div>
<div><span style="color:#0000ff;"><em></script></em></span></div>
</li>
</ol>