I have a grid with data in Lighswitch application. Grid has on every column posibility to filter column. Thanks to lsEnhancedTable
Right now I am sending an ajax request to the web api controler with the list of ids of the Customers that I want to export. It works but with a lot of data it is very slow because I have to turn off the paging of the data to get all visible customers ids so I can iterate over the VisualCollection.
To optimize this I would have to turn on back the paging of the data to 50 records so that the initial load is fast and move the loading of the data to a save/export to excel button.
Possible solutions:
Load data all data on save button click. To do this I have to somehow load all items before I can iterate over collection.
The code bellow locks UI thread since the loadMore is async. How to load all data synchronously? Ideally I would like to have some kind of progress view using a msls.showProgress.
while(3<4)
{
if (screen.tblCustomers.canLoadMore) {
screen.tblCustomers.loadMore();
}
else
break;
}
var visibleItemsIds = msls.iterate(screen.tblCustomers.data)
.where(function (c) {
return c;
})
Second approach would be turn on paging and pass just the filters applied by the users to the web api controller so I can query database and return only filtered records. But I don't know how to do that.
Third approach is the one that I am using right now. Turn off the paging->iterate over visual collection, get the customers id, pass them to the controller and return a filtered excel. This doesn't work well when there are a lot of records.
Iterate over filtered collection in the server side? I don't know if there is a way to do this in Lighswitch?
Here's an option for client side javascript.
// First build the OData filter string.
var filter = "(FieldName eq " + msls._toODataString("value", ":String") + ")";
// Then query the database.
myapp.activeDataWorkspace.ApplicationData.[TableName].filter(filter).execute().then(function (result) { ... });
Related
I have around 10000+ records in my website.I applied pagination to list them.But other than listing there is a map view to pin the listings.then user can search in the map.For that i want the full data in the client side as a json array.I done this like
function doInBackground(){
$.get('car/get-map-data',
{
'params':'$params'
'page':page
},
function(data){
if(data)
{
console.log(data);
}
});
}
This is my api call.And my controller api is
public function actionGetMapData($params){
$searchModel=new CarSearch();
$dataProvider=$searchModel->search($params);
$models=$dataProvider->getModels();
$mapData=array();
foreach ($models as $key => $model) {
array_push($mapData, $model->title);
}
return json_encode($mapData);
}
I have a page size of 10 in the search
$query = Car::find();
$dataProvider = new ActiveDataProvider([
'query' => $query,
'pagination' => [
'pageSize' => 10,
],
]);
I am iterating the above javascript function to get all data page by page to the client side.But sometimes it getting very slow.How can i overcome this.i want to add the datas to my map view.hence the map view also getting slower.How to load 10000+ listing to client fastly
As I understand, you only retrieve 10 items with each API call. If you have 10,000 items, it means that you are making 1000 API calls to retrieve all items. This will definitely not be performing well. You could try to load all 10,000 items in one go and then only do pagination on the client-side.
That said, it may not be "fast" to retrieve 10,000+ items from your API. It will depend on how fast your API can retrieve those items and what each item looks like. If they are simple objects, this could work but if they are objects with many properties, the size of the response will likely be a bottleneck.
In that case, you will need to perform the search on the API in order for it be as fast as possible.
Im using AngularFire+Firebase and have data at firebase-database.
Im trying to paginate Data with Smart Table
My problem is that I dont know how to range query without specifying any child i,e fetch records from record # 25 to 35
Below query gives me first 5 records
var queryFIrst = visitRef.startAt().limitToFirst(5);
$scope.Visits = $firebaseArray(queryFIrst);
now Im trying to get records next 5,from 6 to 10 and I tried below
var queryFIrst = visitRef.startAt().limitToFirst(5).endAt().limitToFirst(5);
$scope.Visits = $firebaseArray(queryFIrst);
but it giving error that startAt and endAt can't be used like this with limit
In general pagination is not a good fit for Firebase's realtime data model/API. You're trying to model a SQL SKIP operator, which won't work with the Firebase Database.
But if you want to model pagination in Firebase, you should think of having an "anchor point".
When you've loaded the first page, the last item on that page becomes the anchor point. When you then want to load the next page, you create a query that starts at the anchor point and load n+1 item.
In pseudo-code (it's real JavaScript, I just didn't run it):
var page1 = visitRef.orderByKey().limitToFirst(5);
var anchorKey;
page1.on('child_added', function(snapshot) {
anchorKey = snapshot.key; // this will always be the last child_added we received
});
Now when you want to load the next page of items, you create a new query that starts at the anchor key:
var page2 = visitRef.orderByKey().startAt(anchorKey).limitToFirst(6);
A few things to note here:
You seem to be using an approach from the Firebase 1.x SDK, such as an empty startAt(). While that code may still work, my snippets use the syntax/idiom for the 3.x SDK.
For the second page you'll need to load one extra item, since the anchor item is loaded for both pages.
If you want to be able to paginate back, you'll also need the anchor key at the start of the page.
Is that what you needed that time?
visitRef.orderByKey().startAt("25").endAt("35")
I asked a similar question Get specific range of Firebase Database children
I set up a datatables that initially gets from server some data and represents it, but then everything is left to the client. Some options are:
serverSide: false,
sAjaxSource: mySource,
My $.fn.DataTable.version is 1.10.2.
Then I need to change, client-side, the aaData under the table because some working on data is performed. I need to update the DT to show the client-altered temporary data without send another request to server (for two reason: prevent useless traffic and because that data is being altered).
I am looking for a way to edit the underlying DT databean to edit it, so then calling again
myTable.draw();
on my table I obtain a refresh realtime without sending another get to the server.
The question is, can I access DT data array, and can I edit it?
How is it done if is possible?
EDIT: I need to feed the table the full bean array as it initially took from the server, same format. So individual row/cell add/edit and client-side building functions are not suitable in my case, unless I manually cicle all objects.
SOLUTION
Use the code below:
// Retrieve data
var data = table.ajax.json();
// Modify data
$.each(data.data, function(){
this[0] = 'John Smith';
});
// Clear table
table.clear();
// Add updated data
table.rows.add(data.data);
// Redraw table
table.draw();
DEMO
See this jsFiddle for code and demonstration.
I am building a simple website for a project. One of my page do MySQL database query and output all contents to a html table, I then use a filter enable uses to show/hide certain rows.
This strategy works well when deal with hundreds of rows, but when dealing with thousands of rows, there is a significant delay when people clicking the link. I thought might be I could add some Ajax, display a 'loading/querying' information when the query didn't finished.
A sample webpage: http://epigenome.wustl.edu/TE_Methylation/browse.php
When people go to that link, before database finished query, I want to display a 'loading' message, and also when people choose to hide several rows, before the Javascript finished hide the corresponding rows, also display a 'loading' information.
(The example page above didn't have this issue because there are only 900 rows, while I am working on a dataset with 10000+ rows)
Did anyone have some suggestions on how to achieve this? many thanks :)
When working with a large amount of data, you want to try and filter as much of that data before you send it to the client. Imagine that your viewer is on a mobile device or limited connection speed. This data will take even longer to transfer.
What I would do in your case, is set up an ajax service that responds with a json list of results for a given filter / criteria. I would then limit the response to a page or range as was stated in comments.
So, filter your results in your MySQL query using parameters provided via an Ajax request.
For example (a load more example)
var dataService = function() {
this.Loaded = 0,
this.Limit = 20,
this.LoadMore = function() {
$.getJSON("data_service.php", { FilterH1ES : true, Blah : true, Start : this.Loaded, Limit : this.Limit }, function(results) {
// Append Rows to table
// ...
}
}
}
// OnLoad call dataService.LoadMore();
Then in PHP, you would do the query filters for MySQL based on the parameters.
<?php
$filters['H1ES'] = $_GET['FilterH1ES'];
$sql = "SELECT * FROM MyTable WHERE /* Default Filter Here */";
if ($filters['H1ES']) $sql .= " H1ES Filter";
// ... run query and json_encode(result);
Code is not tested and my javascript is rusty.
Hello people
I'm trying to figured this out, but I still can't do it.
I have a rails 3 app, I'm working with invoices and payments. In the form for payments I have a collection_select where I display all the invoices number (extracted from a postgres database), and what I'm trying to do is when i select an invoice autopopulate others text_fields (provider, address, etc.) without reloading the page, in the same form.
I know I should use ajax, js, jquery, but I'm a beginner in these languages, so i don't know how or where to start
hope you can help me... thanks
What you are going to want to do is route an ajax call to a controller, which will respond with json containing the information. you will then use jquery to populate the different fields.
In your routes:
get "invoice/:id/get_json", :controller=>"invoice", :action=>"get_json"
In your invoice_controller:
def get_json
invoice = Invoice.find(params[:invoice_id])
render :text => invoice.to_json
end
In your invoice model (if the default to_json method is not sufficent):
def to_json
json = "{"
json += "id:'#{self.id}'"
json += ",date_created:'#{self.date}'"
... //add other data you want to have here later
json += "}"
end
In your javascript file,
$("#invoice_selecter").change(function(){ //calls this function when the selected value changes
$.get("/invoice/"+$(this).val()+"/get_json",function(data, status, xhr){ //does ajax call to the invoice route we set up above
data = eval(data); //turn the response text into a javascript object
$("#field_1").val(data.date_created); //sets the value of the fields to the data returned
...
});
});
You are probably going to run into a few issues, i would highly recommend downloading and installing fire bug if you are not on google chrome.. and if you are, make sure you are using the development tools. I believe you can open them up by right clicking and hitting inspect element. Through this, you should be able to monitor the ajax request, and whether or not it succeeded and things.