Deleting a Row from Datatable in Jquery - javascript

I used Backbone collection to create a table and applied jquery data-table for pagination. I have an icon to delete the row. When clicked it is deleting from collection but deleted row is still present in data table.
More information:
I have the collection with person details (firstname:Tony). And this data will sit in template "{{firstname}}". In that way I'm setting the entire row in template. Suppose my collection is named as "addedGridRowCollection" to which each individual person detail is set to model(ex:addvisModel) and in turn model is set to collection. Hence the code is as ---
var addedVisitorGridView = new AddedVisitorGridView({
collection: addedGridRowCollection
});
newVisitorLayoutView.gridRegion.show(addedVisitorGridView);
addedVisBasicModel.set("firstname", "Tony"); addedGridRowCollection.add(addedVisBasicModel);
applyDataTable(); // applying jquery data table
$(addedVisitorGridView.el).show();
Now in delete trigger: when I clicked on Delete button,The following is the code I am using:
var indx= model.get('index');
var visModel = addedGridRowCollection.findWhere({index: indx});
addedGridRowCollection.remove(visModel);
here it removes from collection but not from the data-table (Jquery).

Related

PreSearch lookup entity grid in PowerAppsPortal JQuery

I have DataVerse form in PowerAppsPortals.
One of the field is LookUp for another Dataverse table.
What I need is to prefilter entity-grid in Lookup based on variable which I get from one of the form fields.
var Pesel is the variable that I need to filter with.
The method tr.remove() works (tr.hide() also works) but because my entity grid is paginated when it found value for example on second page of grid it doesn't automatically move found record to the first page - user has to manually move to exact page on which jquery found row.
My lookup grid contatins 6000 records - after change of parameter PageSize to 6000 it takes forever to load grid and prefilter it.
I beg you to help me, I think I've searched whole internet and can't find solution.
var Pesel - it's the value that I get from form field and want to search for it in grid view.
PeselGrid - it's the value that I've picked up from column in grid view.
What I need is to simply prefilter this grid view with jQuery after user opens it - he fills the correct fields in main form and jQuery prefilters grid view to show for him only found rows (something like using the search field in grid view)
$(document).ready(function(){
$(".entity-grid").on("loaded", function () {
var Pesel = $("#cr94f_pesel").val();
var tBody = $(this).find("tbody");
$(".entity-grid").find("table tbody > tr").each(function () {
var tr = $(this);
var PeselGrid = $(tr).find('td[data-attribute="cr94f_pesel"]').attr("data-value");
if (PeselGrid != Pesel) {
tr.remove();
}
});
I think that I've searched whole internet for the solution

How to add class to tr on dataTable if data has ID and then save it as sessionStorage

I'm using dataTables for fetching the data on the front-end. For this scenario, I'll just add a dummy datatable for this. My goal is to highlight/addClass to the selected row and save it to the sessionStorage so that when user refreshes the page it will still be highlighted.
I want to add a class selected only to the selected row that has a shipment_id on it and save it to sessionStorage. If shipment_id is empty then don't highlight the row or save it to session.
I have a JSFiddle here as an example for the scenario. But the function that I've tried is only highlighting the specific row when clicked and ignoring the shipment_id data. Is there any way to modify the functions or the code to only addClass() and save to sessionStorage if shipment_id has value?
Link here for
JSFIDDLE
Why don't you just add the check if the shipment ID value is present to call the highlight and session store function?
...
rowData = table.row(this).data()[1]; // get data of shipment ID
if (rowData) {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
persistSelection( table.row(this).index(), $(this).hasClass('selected'));
}

How do I access a row object of this grid?

I am trying to access an individual row from a grid in Kendo UI so that I can run operations on the selected entries in the row. However, my code is not correctly grabbing the row itself and I do not know how to resolve this.
I've tried binding the grid to an event that, when changed, will fire my method in order to grab whichever row was toggled.
const row = arg.sender.element.closest("tr")
const grid = $("#ECUs").getKendoGrid()
const dataItem = grid.dataItem(row)
Results:
I.fn.init [prevObject: I.fn.init(1)]
length: 0
prevObject: I.fn.init [div#ECUs.k-grid.k-widget.k-display-block]
__proto__: w
(Sorry, I apparently don't have enough reputation to post images)
Ideally, I would expect to get a tr object back in the first method, but I'm getting absolutely nothing instead. Does anybody know how to correct this to access the row?
If you have a click event on one of the columns, you can access the table row using some jquery.
function onClickListener(e) {
e.preventDefault();
var row = this.dataItem($(e.currentTarget).closest("tr"));
}
Option 1:
You can use the edit event of a grid to get the currently selected row model.
edit: function(e) { console.log(e.model); }
Here, e.model contains the row data and you can access the particular column value by e.model.columnName.
Option 2: You can get the row model data like below from the other functions.
https://stackoverflow.com/a/56478061/8733214

Get element other web page using Javascript/jQuery

I need to update 2 tables. Each table on an other web page. I'm using javascript to delete the object from the database and to delete the row from the 2 tables. But javascript can only delete the row from the table that is from that document.
Simply said: I can't get the table element from the other web page. After searching a while i found that i have to do it with jQuery/Ajax but i can't fix it. Here's part op my code:
function deleteItem(action,cdplayer,index){
//using ajax to delete the object from database
var information = "action=" + encodeURIComponent(action) + "&cdplayer=" + encodeURIComponent(cdplayer);
xHRObject.open("POST", "StockServlet", true);
xHRObject.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
xHRObject.send(information);
//deleting the row from the table of that document
var table = document.getElementById("tableAdmin");
table.deleteRow(index);
//here i have to delete the table from the other document
}

Refresh table information instead of appending

I would explain the functionality of the jquery plugin myself but the website definitely does it better than what I can, it seems quite a simple plugin for the most part
http://tablesorter.com/docs/
I'm using this plug to filter my tables after they are generated, works fine. The issue is that the table is live updating and after table is filtered, if a new update is received and then you filter the table again, the data duplicates.
I have been looking in to it a lot, it seems the plugin builds up a cache of the information which allows the data to be filtered.
What I'd like to do is to delete the cache and rebuild it everytime there is an update, preventing duplicate information from being appended to the table array.
client javascript:
function appendTables(appendData, index) {
var tabPage = "#tabpage_"+index+" > #myJobs_"+index+" > .userJobs";
userJobsElement = $(tabPage);
userJobsElement.empty();
userJobsElement.append(appendData);
applySortTable();
}
this part generates multiple tables using a dynamic id as well as 2 standard tables:
function applySortTable() {
var tables = $('table');
tableCount = tables.length-2;
$("#myJobs_all").tablesorter();
$("#myJobs_noteam").tablesorter();
for (var i = 0; i < tableCount; i++){
$("#myJobs_"+ i).tablesorter();
}
the table is then generated using the plugin and as I said creates a cache, does anyone know how to clear the cache then have it rebuild for when this happens to a user?
update
the updating of the data is now working but currently we have setup a tab based table system to view different team information. when the update is processed, the table is then only updated in the first table and the other tables stop working, anyone know how to handle this?
Re-initializing the tablesorter plugin is not the correct method. After adding new content, simply trigger the update method:
$("table tbody")
.append(appendData)
.trigger('update'); // this event will bubble up
Check out this demo's code example

Categories