How do I get the data of the current tab?
How do I get the data of the current tab?
JefryD
Posts: 8Questions: 1Answers: 0
Hi friends, prepare this simple test case: http://live.datatables.net/becayaxu/1/edit
I have a table separated in several tabs, to separate them I use the answer of this discussion https://datatables.net/forums/discussion/26056/filtering-a-large-table-into-tabs it is something very simple, I set a "type" to the "tr" of the table and with that I show or hide them according to the selected tab.
I have a column "age",
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
I get all its values and sum them up showing it in the input "input-id",
<div>
<h5>Age current tab: </h5>
<input id="input-id"/>
</div>
but when I change tab, I don't sum up the values of the current tab. For example in tab Ait should be 245.
I know what my problem is, I get all the values and add them up,
$(document).ready( function () {
var table = $('#example').DataTable({
bInfo: false,
bFilter: false,
bSort:false,
bPaginate:false,
"scrollX": true,
"paging": false,
"scrollY": "500px",
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows({page: 'current'}).nodes();
var allage = api.column(3).data()
.each(function (value) {
return value;
});
var age = Array.from(allage);
var sumage = 0;
for(let value of age){
sumage += parseFloat(value) || 0;;
}
$('#input-id').val(sumage);
}
});
I know that my problem is in
var allage = api.column(3).data()
.each(function (value) {
return value;
});
how do I get only the visible values?
This question has accepted answers - jump to:
Answers
The problem is that using
.show()and.hide()to show/hide rows only changes the DOM display. Datatables doesn't know about these changes. Instead you will need to create a search plugin to show/hide the rows based on the row attribute. See this thread for information of how to access therow().node()in the plugin. From their you can use the row attributes to decide to show (return true) or hide (return false) each row.You may need to change the
selector-modifierfrom{page: 'current'}to{search:'applied'}indrawCallback.Kevin
Hi, I made the changes you told me http://live.datatables.net/zavohiti/1/edit , I am no longer using
api.column:I am now using
api.rowand setting it to{search:'applied'}.The first thing I did was to create one more variable in the table which is going to be calledgroup:this variable contains the groups set from 1 to 4, also to each element
<tr>add a class with the same values from 1 to 4, for each element:Now I am also using the search plug-in and I am searching the data by row of the group:
When I get the class using
row().nodeas you told me, if I get the class and match it to the group, but it doesn't work, it does filter but something important is missing.In the $.fn.dataTable.ext.search.push plug-in how do I call the ids of my tabs, I know now that it is not necessary to call the class of the
<tr>, as I only need the tab id to compare it with the data of the group so I can show and hide according to the tab I select.I stress my question how do I call the ids of my tabs inside the search plugin?
Thank you very much for the previous answer, it helped me a lot.
Use
settings.sTableIdas shown by Allan in this thread.Kevin
I mean the id of my tabs
(nav nav-tabs):Looks like you are using Bootstrap tabs. Maybe use a global variable that you set when the tab is changed. See this SO thread for some options. Reference that global variable in the search plugin.
Kevin
Thanks my friend, I can see the sum of each tab, http://live.datatables.net/vemikeju/1/edit
To show all the data, the tab all its
id = 0, just match theidTab = 0if it comes to touch that Ireturn true, all because there are no values with0in the table.Thank you very much for your answers, you are a great help.
Hi, I am passing this code example to my project, but there is one thing, my datatable works server side
serverSide: true, with this function activated the search plugin does not work anymore?That is true. The search plugin works with client side processing. With server side processing it is expected that the server script perform all the filtering.
Do you need server side processing? In your test case you have
"paging": false,which negates the paging functionality achieved with server side processing. If you have"paging": false,you might as well removeserverSide: true.With server side processing you could use
ajax.datato pass the tab ID to the server and have the server script use that to update the table. See this example.Kevin
Is there not a way to manipulate the view according to a table field?
For example I could group by the field "
group". I have a field called "container" and I group it as follows:And I do it like this in the table:
The view of my project is in Spanish, sorry.
The point is that I can group the data with a field, so is there a way to group them and show them in tabs
(nav-tabs)?That is to say to be able to call the id of a tab inside the function
drawCallbackand to make that the group selected by that id is shown?It would be something like:
Could this be a solution?
Take a look at the RowGroup extension. Sounds like this is exactly what you describe.
Kevin
Hello, do you know how to hide those that are not groups?
You could remove those rows as they come in from the Ajax data, or later when making the groups. It depends really on what a "no group" is - as technically that could still be a group!
Cheers,
Colin
Hello, I end this discussion with the following information, the best way to show by groups is the one in this thread: https://datatables.net/forums/discussion/65968/dynamic-idisplaylength-row-group-items#Comment_183782
It was everything I needed, with a little tweaking. The search plugin doesn't work with the
serverSide true, so I used a column filter to search the data.Before:
After:
With that change, it worked correctly, of course I did not use the search plugin, everything else I kept.
Thank you very much for your comments and support.