Why is datatable sort wiping data from table - javascript

I have 2 tables in my view both using dataTables , first table works fine but second table when i try to sort data with headers is wiping data from table.
Demo
This is how i defined dataTables for my both tables
to get the idea i used screenshot
Code
here is my second table code to define datatables
var table = $("#customerTable").DataTable();
any idea what is wrong?
If you need more code just let me know i'll update the question.
Update
Based on code i shared in jsFiddle (link in comments) if i move my second table definer to success function of my first table like:
// rest of function then at the end having like...
var otable = $("#customerTable").DataTable();
}
});
});
$("#data_table2 tbody tr:first-child").trigger("click");
});
It will allow me to sort my second table data BUT it replace my data with first data (confused? :) see GIF below)
To see Video version click here
Explanation:
as you see my first selected row has returned data in second table which has value of nullewqrf2wrtf but my second selected row the returned data has value of null
when i click sort on my second data it returns data of my previous selected row nullewqrf2wrtf

Solved
The solution for me was:
Moving my update function completely to my first table success
function
Double check my other functions in that success function and get
misspelled var's
With fixing my var's misspelled id's etc. now i can sort my data and issue in my update part has fixed as well.
Hope it can help others as well.

Related

jQuery adding an <tr> line when loading / jQuery and PHP

I have a table built that comes from data in the server. I have a button that will activate or deactivate a category. If the category is active, it will show the action of "inactivate" and so the way around. So I need the table to refresh so when the user clicks activate it will automatically switch. I am almost done with this. Issue is that when I use the jQuery load function, it seems like it's adding one additional line instead of just refreshing it.
This is my code, I send a request to the server, then wait for it to finish to load.
My code is below:
async function cambiarStatus(tipo_transa, ruta, estadoCat, idCat, div, file)
{
await modStat(tipo_transa, ruta, estadoCat, idCat);
$(div).load(file+div);
}
With the table I built with PHP I only have one ... but then it goes and another one which ends up in making the table go nuts.
Many thanks for your help!!!!!
I'm going to have to guess that the value of the variable div is something like #c-i-1, or # plus the id of whichever table row you're trying to replace.
In that case, the code as written is telling jQuery to replace the content of the table row, not the table row itself, with the matching table row loaded from the file. That's going to cause exactly the problem you're showing, a table row being put inside a table row.
You need to replace the table row itself with the retrieved table row. For that, as convenient as jQuery's load method is, it doesn't offer the functionality you need.
Something like this should work better:
$.get(file, table => {
const row = $(table).find(div);
$(div).replaceWith(row);
});

Angular Table: How to capture first row of sorted table (No jQuery)

I am having an angular table with ng-repeat and all...Table is being loaded with sorting of 1st column...
I want to capture 1st row data after page is full loaded....
I think 1 have 2 question here:
How to call any method in angular only after page is loaded full?
How to capture 1st row data?
Thanks in advance
Samit
you can use the angular.element(document).ready() to hook on ready events.
For the first row data, can't you just use array accessors to retrieve it since you already have ng-repeat on it.
$scope.elements = [1,3,4,5]; // elements bound to ng-repeat. and then
var firstRowData = $scope.elements[0];
Finally I got it, may be not the best solutions but it working well...
For 1st item, check start time before making json call and once call is completed, capture time again (in ms)..take the difference call $timeout with that much of delay.
2nd item, use ng-mouseover and capture row details whatever u want...
Suggestions are most welcome

How to do multiple levels of nested tables in JQuery/HTML

I'm trying to create tables with multiple levels of nesting which can be expanded/collapsed. So the main table has rows which can be expanded to show the child rows in the middle of the table, who themselves can be expanded.
Each table needs to have their own headers and preferably the columns would all line up but have the start of the child tables be slightly indented as I try to show below.
For example:
ColHeader1 ColHeader2 // main table headers only shown at the top
record1 ...
ChildHeader1 ChildHeader2 // child headers shown for each table
childrec1 ...
SubChildHeader1 SubChildHeader2 // child headers shown for each table
subchildrec1 ...
childrec2 ...
record2 ...
ChildHeader1 ChildHeader2 // child headers shown for each table
childrec5 ...
record3 ...
I've tried to create the code by expanding a sample I found, but it doesn't work for expanding the inner most table. The code can be found here: http://jsfiddle.net/afsz5brg/
The end product will be in a ASP.Net MVC app, but for now I'm just trying to get it working in javascript/JQuery so that hopefully I can just change the data being sent to it.
I'm happy to consider alternative ways for doing it or be told if any of the code is doing something bad/deprecated.
There are a couple of bugs I have discovered in your code. I would list them one by one.
1) Your assumption of registering a callback on $('#detailsTable tbody td').on('click', ...); and that being called on every new instance of that table that gets created is wrong.
If jQuery Data Table was internally cloning the #detailsTable element, then your code would work. But that isn't the case as you are retrieving the HTML markup of #detailsTable and returning it to fnOpen like so: oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details'); so the callback never gets called.
You need to register a callback to the newly created details table. Check out this JsFiddle to see how.
2) I think I also spotted another bug while reading your code. I haven't fixed it as I was not sure if I was right or not. In the callback for your #detailsTable, you call fnFormatDetails() instead of fnFormatSubDetails() like so oInnerTable.fnOpen(nTr, fnFormatDetails(iSubTableCounter, subDetailsTableHtml), 'subdetails'); No one is calling fnFormatSubDetails() at the moment. Please check if this is a bug or not.

Is there any CallBack function which is called before/after data is loaded in Angular Js ng-Grid?

Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.

Knockout observable array not updating secondary table

I am populating a secondary table with an observable array that is a child of another observable array but when I select a row from the first table the records in the secondary table are not updated to reflect the selected record from the first table. I can see from the log messages that I have visibility to the collection so it seems like everything is working correctly but the second table is not showing the expected results.
Please see my jsFiddle here:
http://jsfiddle.net/D64Bj/5/
You will see in the log messages that when I click a row in the first table I can see how many records are in the second item in the collection and I get the right Id but the rows in the second table are not updated.
does anyone see what I am doing wrong here? Any suggestions on a better way to handle this using knockout.js? Thanks in advance!
You need to make ActiveTeam a ko.observable, otherwise there won't be any binding:
Here's the changes you need:
<tbody data-bind="foreach: ActiveTeam().Players">
...
myTeams.ActiveTeam = ko.observable(myTeams.Teams()[0]);
...
myTeams.ActiveTeam(item);
Edit: and here's a fiddle

Categories

Resources