Refresh table information instead of appending - javascript

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

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

jQuery DataTables: check all checkboxes on page load

I have a grid which is based on jQuery DataTables Checkboxes. It pretty much looks like the basic example that gyrocode have on their webpage
Does anyone know if I can have all checkboxes checked when the table first loads please (including the master checkbox, the one at the top that checks/unchecks all with a single click)
I tried $("input.dt-checkboxes").prop("checked", true); but that checks only the entries that are currently shown on the datatable's page
you can use cells.checkboxes.select(), filter the cells but, but we actually return true for all rows here, a working fiddle:
...
'initComplete': function(settings){
var api = this.api();
api.cells(
api.rows(function(idx, data, node){
return true;
}).indexes(),
0
).checkboxes.select();
},
...

Slow rendering of HTML table when binding JSON data

Using angularjs (1.3) with webapi here.
I have UI where the user can upload a excel file. My api reads the excel file and returns rows data back to the UI in JSON.
The UI then reads the JSON and binds it back the UI table.
The rows and columns of this UI table are dynamically generated and are not fixed, because of which I am using contenteditable in HTML as the user can add more rows.
I can read from the the JSON fine and populate the array that holds these json values. The issue is while rendering, the screen is frozen and takes time to render all the data.
I am currently binding about 800 rows and the screen freezes and takes about 10-15 seconds or more to fill up the UI table. I would be having lot more data so looking for a solution for this.
I tried to debug and can see that there is no issue getting data back from the API, and reading JSON from the API. There is also no issue while populating the array.
Once the array populates thats when the issue comes. The UI freezes and takes time to render this data.
I am not sure whats going on here or why it takes so time to render. Below is some sample relevant code:
//Read json from the API
$http.get('https://api.myjson.com/bins/d1ugw').success(function(data) {
if (data.length > 0) {
$scope.setJson = data;
$scope.initializeTable(true);
var columns = $scope.targetTable.columns;
//These are the 3 columns of the Table but can vary dynamically(currently just hardcoding it)
var refColName = "state, month , year";
//Push the columns to the table array
var colArray = refColName.split(',');
for (var i = 0; i < colArray.length; i++) {
$scope.targetTable.columns.push({
id: columns.length,
refColName: refColName.split(',')[i]
});
}
//Read the values from the json
var idValues = $scope.getTableValues($scope.setJson, 'id');
var commentValues = $scope.getTableValues($scope.setJson, 'comment');
var rowValues = $scope.getTableValues($scope.setJson, 'refcol');
var setIdValues = $scope.getTableValues($scope.setJson, 'sid');
//Push the data back to the table array.
$scope.pushRowData($scope.targetTable, rowValues, commentValues, idValues, setIdValues);
//Till the above steps everything happens quickly and I can see $scope.targetTable being populated with my json.
//But after the above step the screen just freezes and takes time to show the entire data on the UI table.
}
});
Below is the relevant code for the UI:
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td class="fixed-width">
<span>
<a class="btn-xs" ng-show="row == $index" ng-if="targetTable.rows.length > 1"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
</span>
<span contenteditable="true" ng-model="r.tableId" ng-change="addNewRow(r.tableId, r)">{{r.tableId}}</span>
</td>
<td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-change="rowDataChange(r[column.id])"></td>
<td class="comment-fixed-width" contenteditable="true" ng-model="r.comment" ng-change="rowDataChange(r.comment)"></td>
<td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
</tr>
</tbody>
I have created the below JSFiddle to show my example and issue I am facing.
http://jsfiddle.net/aman1981/u1vbeos5/312/
I have also added comments in my jsfiddle for showing what method does what.
Would appreciate if anyone can help my resovling this issue.
Here are some performance stats:
with contenteditable (~4000 digest calls) = 1.800ms -> http://prntscr.com/lweugn
without contenteditable (~4 digest calls) = 1.300ms -> http://prntscr.com/lweusn
with pagination just showing the first 50 results = 0.200ms -> http://prntscr.com/lwev09
You loose the most performance because of the DOM changes obviously. But keep in mind that the number and duration of digest cycles is key for good performance. Especially when you have a huge amount of watchers. Here is a Direct comparison:
http://prntscr.com/lwf1nn As you can see the digest loop is burning 30% of your performance overall but is not the reason for your frame drop. The frame drop is mostly caused of the DOM changes. Drawing such a big table takes some time.
Further the table starts rendering when your REST call is finished. This call takes in my case roughly additional 1.700ms. So it takes nearly 3.500ms from start until rendered results. Even with pagination 1.900ms.
I would recommend a pagination with search but you can try to increase the performance anyway.
Helpful links would be:
https://stackoverflow.com/a/47347260/8196542
https://www.codeproject.com/Articles/1173869/%2FArticles%2F1173869%2Fng-repeat-performance-degradation-at-case-of-very
First, I recommend that you upgrade the Angular version to the most advanced of course if possible.
Also check the animate version.
Beyond that you thought of using an advanced tabular component such as ag-grid ?,
I can load 10000 rows without any problem with it.
https://www.ag-grid.com/
Your code is triggering the $digest loop over and over.
The "watch" method counts how often the $digest cycle is actually called:
var nbDigest = 0;
$scope.$watch(function() {
nbDigest++;
console.log(nbDigest);
});
I bet this is the cause of your performance issues.

button adds a row and inputs cell values from text fields

i asked a similar question before however the solution no longer works for my application, i need a button click to create a new row (FailureInstance) in a table (failuretable) and i need it to populate three of the cells with data from fields that are elsewhere filled in. here is my code: form1.failuretable.AddFailureButton::click - (JavaScript, client)
xfa.host.messageBox("Failure Recorded and Added To Table Below. Please Continue Filling Out the Form Until All Failures Have Been Recorded. Then Please Save and Submit the Form.", "Continue/Save/Submit", 3);
if (xfa.host.version < 8) {
xfa.form.recalculate(1);
}
var newRow = failuretable._FailureInstance.addInstance(1);
newRow.FailureCode.rawValue = form1.FailureType.rawValue;
newRow.Location.rawValue = form1.CellLocation.rawValue;
newRow.Comments.rawValue = form1.AdditionalComments.rawValue;
right now this doesn't even create a new row for my table... any help is appreciated!
You should check whether multiple instances for a row are allowed. Select FailureInstance in hierarchy view and then in Object->Binding (if you dont see it go to window menu and select Object) check wheter "Repeat Row for Each Data Item" is selected. If not then select it and your code should work fine.
I advice also to enable JavaScript debugging in your Adobe Reader because it than you should see when error appears and what is it about. Open Reade go to Edit->Preferences->JavaScript and select "Show console on errors and messages". Then you will need to restart Designer.
At design time remember to enable:
Object > Data Binding > Repeat Table For Each Data Item
In code, I believe that lack invoking "instaceManager":
...
var newRow = failuretable.FailureInstance.instanceManager.addInstance(1);
...
http://help.adobe.com/en_US/livecycle/9.0/designerHelp/index.htm?content=000178.html

jQuery autocomplete UI Widget- Perform jQuery select event on dynamically created table row element

I have a working jQuery autocomplete being performed on the text input of a table data element, txtRow1. The text data is remote, from a mysql database, and is returned by JSON as 'value' for the text input. The returned data includes another piece of text, which, via a select event within the autocomplete, is populated to the adjacent table data element tickerRow1.
With help from the SO community, the autocomplete is now live and working on all text input elements of a dynamically created table (so txtRow1 to txtRowN). There is javascript code to create and name the table elements txtRoxN + 1 and tickerRowN + 1.
However, I have a problem with the select event for the id of tickerRowN. Because it changes every time I add a row, I don't know how to call the select event for the specific id of the table data in question.
I have done a lot of searching around but as I am new to this, the only functions I have been able to find manipulate the element data when you know the id already. This id is dynamically created and so I don't know how to build the syntax.
Thankyou for your time.
UPDATE: with huge thanks to JK, the following example works. I now know about jsFiddle and will try to use this for all further questions. The following code works for my dynamic example, but I don't know why. Sigh.
jsFiddle working example
function getRowId(acInput){
//set prefix, get row number
var rowPrefix = 'txtRow';
var rowNum = acInput.attr("id").substring((rowPrefix.length));
return rowNum;
}
$("#txtRow1").autocomplete({
source: states,
minLength: 2,
select: function(event, ui) {
var tickerRow = "#tickerRow" + getRowId($(this));
//set ticker input
$(tickerRow).val(ui.item.label);
}
});
http://jsfiddle.net/jensbits/BjqNz/

Categories