tablesorter v2.0 dynamically adding rows in a table - javascript

We are trying to implement Tablesorter v2.0 in our solution. We are using Knockout, MVC, C# in our project.
We have scenarios throughout our project, where in a table, we are dynamically adding rows based on Search result conducted or adding/deleting a row.
We also implemented table sorting on above scenarios and they don’t seems to be working
Scenario 1:
1) Added below line of code during page load
$('.tablesorter').tablesorter();
2) Added below line of code when dynamically adding/deleting a row in a table or dynamically adding rows based on a Search result.
$("table").trigger("updateAll"); or $("table").trigger("update");
Scenario 2:
1) Added below line of code during page load
$('.tablesorter').tablesorter();
2) Added below line of code when dynamically adding/deleting a row in a table
$('.tablesorter').tablesorter();
Issues in both scenarios:
• When we add a new row or dynamically adding rows based on Search results, based on point #2 (above), system is dynamically duplicating the rows in the table and also sorting is not happening correctly.
Any recommendations to resolve above problem would be appreciated.

Tablesorter should only be initialized once. Using $('.tablesorter').tablesorter(); more than once on the same elements will be ignored. Set the debug option to test this behavior.
To update tablesorter's internal cache you should trigger an "update" event.
Add new/remove rows.
$("table").trigger("update");
Only use the "updateAll" event when adding or removing columns.
Add/remove a table column.
$("table").trigger("updateAll");

Related

W2UI Grid selects entire row when clicked, how to select single cell or column for copying?

Running into an issue with the W2UI grid.
Goal: I'd like to be able to select an entire column and copy/paste it to Gsheets. Alternately I'd like to be able to click a single cell and copy it's contents too.
Issue: When clicking it selects the entire row including all irrelevant columns, and copying that includes headers too, meaning it has to be cleaned manually before it can be inserted into a spreadsheet.
The "editable" property allows me to select a single cells contents but even that's not quite what I'm looking for as it required 2 clicks, highlighting text then copying, adding 3-4 button presses to the process.
Can't seem to find the answer on how to fix this in the documentation but I may just be missing something.
Option 1:
You could (temporarily) switch the select type from row (default) to cell.
Just make sure to remove any existing row selection first, otherwise it may look confusing.
Assuming your grid is named grid:
w2ui.grid.selectNone();
w2ui.grid.selectType = 'cell';
w2ui.grid.refresh();
Fiddle: http://jsfiddle.net/yghueLxp/
Option 2:
There's also a new (undocumented) feature to add a copy icon to whole columns - also demonstrated in the linked fiddle, on the first column.
All you have to do is add clipboardCopy: true to the column properties.
For this new feature you'll have to use the dist files of the current github master - it's not available in w2ui 1.5 RC.
By the way, you can make the grid behave similar to an Excel sheet, allowing copy & paste of multiple cells, see: Spreadsheet Like JavaScript Grid
I'd like to be able to [...] paste it to Gsheets
The copied values are TAB separated. This works well when you copy&paste to/from MS Excel. I don't know about Gsheets.

Bootstrap Table delete dynamic element after sorting the table

I have an issue with wenzhixin Bootstrap Table, in one of the table cell there is a button, and once this button is pressed it is deleted and a new button with popover is created dynamically.
The problem is once the table is sorted - the new button is deleted and the old button comes alive.
All the description that i have described is available in the following fiddle:
http://jsfiddle.net/eitanmg/gmtm3d9k/1/
How can I keep the new button after the table is sorted?
This seems to be a known issue of the plugin. The issue is reported here and it is still open. The sort basically re-renders the table back to its original state, discarding all dynamically made modifications to it.
I suggest using tablesorter for sorting purposes.

Datatables 1.10 - Swap table

In my application I have table that can have multiple columns, based on date range selected.
I need to be able to display table containing 20 columns or 50 columns (number of columns is based on data range from parameters). I did that, but I was refreshing page when my parameters changed.
Now I'm trying to do it better.
I've created sample that shows my approach: http://live.datatables.net/fojusec/3
Basically I'm swapping "table" with new content that comes from ajax request and then I'm calling "dataTable" on that new table.
My example works fine, but I was wondering if maybe there is a better way to do it, maybe by reconfiguring table?
Is it safe to do that like I did it? I'm worried about any leaks.
EDIT:
What I'm not sure is if dataTable object is attached to table. So if I'm removing table from DOM should I be removing dataTable object also.
I would like to avoid any conflicts. I clicked on my example for some time and I didn't got any errors.
QUESTION: What is the best way to swap or reconfigure table using datatables 1.10

How can I perform table specific filtering for multiple datatables in a single page?

I have 4 datatables in a a single page out of which three use the $.fn.dataTableExt.afnFiltering.push method of the filter API. My problem is that the filtering gets applied to all the tables present in the page at the same time.I tried destroying the existing tables before creating new ones but still I have had no luck.

Hiding HTML Table rows when using Sorttable

I have a large table (4000 rows, 17 columns) with which I use Sorttable. It's somewhat usable in Chrome (not so much in IE). I'd like to add some checkboxes (not on each row, just in a control panel besides the table) to show/hide groups of rows, using Javascript. I'm not (so far) using JQuery or anything other than Sorttable (which works great, by the way).
What's the best way to hide those rows? I think I need to do more than just set display: none; on the rows I want to hide, as I think this means the row would still get sorted by Sorttable. I suppose I want to remove the row from the table altogether, and keep them in some list outside the DOM? Would anybody happen to have some existing/sample code that does that?
One possibility is to save all data in JSON and then write it to an table. By this you can remove the item from the table, sort the table and add the item again if you'd like.
Don't have an example right now but check it out.
Could probebly save the table with
http://api.jquery.com/jQuery.data/
Hope it's some help

Categories