Datatables 1.10 - Swap table - javascript

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

Related

Html table sorting using JavaScript or jQuery

This is a image of my sample code. I want to sort this table data, column wise when click the each sort button in top in the table. This table contains PHP also.
Number
Date
Three
Five
One
Four
Two
When user click on sort button, entire row should be sorted in acs or desc according to clicked column's data. Column contains words and column 2 contains dates.
Anyone knows that help me please....
Thanks
Can you check jquery datatable plugin. That supports sorting, expanding columns for a table. Please see the link
https://datatables.net/examples/basic_init/table_sorting.html
I would start with this:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table
It's works just fine, and doesn't require even jQuery, let's alone jQuery plugins.
It's obviously, you should adapt code to sort with different columns names (not just for "Name"), but is easy enough.
You can use table-sorter (a client-side table sorting) and sort the table once after the page loaded. After that each of the columns is sortable by clicking the column header (It is in pure javascript and doesn't need jquery):
http://tablesorter.com/docs
I have used the tablesorter jQuery plugin. It is a light weight and a very good plugin for your needs. I think this will suits to your need.

BootStrap Table With Dynamic Data using Jquery

I am using a Bootstrap Table with JQuery.
I tried to help myself but still could not get a solution.
Please check out this link.
Here I need the data to be dynamic.
For example, there can be a situation where fields can get created dynamically.
Sometimes there can be three columns and sometimes there can be four columns based on the JSON object.

tablesorter v2.0 dynamically adding rows in a table

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");

How can I get the number of rows displayed in a jqGrid?

Maybe this information is out there and my Google-fu is failing me, however I can't seem to find the answer. How can I get the number of rows being currently displayed in a jqGrid?
Every question and answer I've found on this topic tells you how to get either the total number of rows (displayed or not) or the number of rows loaded by an external service. Instead, I'm trying to get how many rows are being displayed in the current page of the jqGrid. One of my jqGrid attributes is rowList:[10,20,30], but I'm not sure how to access which one is selected myself.
All I want is how many rows are being currently dislpayed on each page of the jqGrid. The closest thing I've found so far has been this Q&A, but this displayed how many <tr>s there are and wasn't really what I needed.
$('.ui-pg-selbox').val()
Tested on the latest jqGrid (4.4.1)
Of course, if you have more than jqGrid per page, you can use an wrapper to ensure that it is the one you're looking for.
$('#myjqGridWrapper .ui-pg-selbox').val()
Not sure whether it's the best way, but it gets the job done.
The space means a descendant selector, that is it looks for elements containing the class ui-pg-selbox which are descendant of an wrapper #myjqGridWrapper. That would require having a div or some other wrapper around your table.
UPDATE: Also, if you have the table ID or a reference, you can use a more sturdy way of querying its jqGrid instance's .ui-pg-selbox:
$('#jqgridTableId').closest('.ui-jqgrid').find('.ui-pg-selbox').val()
The following will return you the number of displayed rows on a grid's page:
$('#myjqGridWrapper').getGridParam('reccount');
You shouldn't rely on the view for information. You should pull this information out of the JQGrid model. You can do so by calling the getGridParam method like so:
var rowNum = jqGrid.getGridParam('rowNum');
See here for more information: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

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