I am using jQuery dataTables plugin in a custom phonebook I have created for my organizations phonebook. The issue that I am having is that since I am using the SELECT * from Table command on a table with some 3000+ rows, dataTables wants to load the entire SQL table before loading and it causes the page to lag terribly. Is there a better way to do this? My reason for using dataTables is it has a custom jQuery search option which works beautifully.
I have tried using SELECT TOP but it will not return anything but the first hundred or however many specified.
You can load partial data and use ajax to load more data when the user pages through the result. Have a look at the example they provide.
https://datatables.net/release-datatables/examples/server_side/pipeline.html
Try AJAX paging, like Vlad says.
Also check out the bDeferRender option (look it up here). If set to true you definitely experience faster page load. I dont know if that will be fast enough without server-side paging though. And what about the stress put on the DB?
Related
I have repeater control in which i am binding data from sql server database, Now i have number of records showing on my page but i want that i can filter my records according to dropdown selected. I need 4-5 dropdowns control thats depend on my need and i don't want my page to refresh while filtering.
Below is the example, this website using checkboxes too but i need only dropdowns...
http://www.phonearena.com/phones/full#/phones/full/
Give me any idea how to start, i think ajax is the thing i need. Suggest some examples if you have.
Ajax is the right solution.
Personally i suggest you jquerytemplate and ajax call few row code to achive your goal you may find more info here Load JSON data using the dropdown menu and refresh the div area with the new results in a web site
It is a good point to start and you can make more stuff with this logic :) really simple and fluid code :)
I would suggest you to use a client-side framework (so in JavaScript) like AngularJS, BackboneJS or KnockoutJS. They all provide ways to work with collections in JavaScript (like filtering in this case). You won't need Ajax excepted for the first load or if you want to do some paging. And because it's all client-side it will be far more fluid than re-downloading at every criteria change.
I have created web page that retrieves data from MS SQL database and display it to the user in well formatted manner. Data retrieved depend upon criteria selected by the user. But sometimes data retrieved is very large. I want to display records to the user page wise, i.e. 100 records on first page and next 100 records displayed when user clicks next button. This means only 100 records should be retrieved when user first select search criteria, next 100 records retrieved when he clicks next button and so on, as to reduce data transferred from server to client.
Please suggest me how to achieve this as soon as possible. Thanks in advance.
What you are looking for is called paging.
This can be done a million ways. You mention jquery, javascript and asp.net. For displaying purpose that is quite all righ but for good performance you want to make sure that the actual selection of the page has to be done at the backend.
One approach is this:
http://msdn.microsoft.com/en-us/library/aa479347.aspx This is not jquery but it shows a way to do it.
You can use jqGrid or DataTables. Both are very popular grids
Ask user to set there criteria and then render the grid according to that.
If you want simple fast and way then think in using jQuery plugins like these
jpaging OR datatables.
you should search for design pattern for this.
kindly look at this Easily build powerful client-side AJAX paging, using jQuery
Your use of both asp.net and C# makes me (probably because I am partial to it) think "WebMatrix". If, indeed you are using WebMatrix, check out its Grid Helper. However, be warned that this method can generate some very serious overhead for your html page (by that I mean that if you query 1,000 rows and only use 100 per page, it will retrieve all 1,000, use 100, and waste the other 900). Also, using the WebGrid generates the results in a table, which may not be your preferred style.
Alternatively (still thinking "WebMatrix"), you could use this article here (this is my preferred method): http://www.mikesdotnetting.com/Article/150/Web-Pages-Efficient-Paging-Without-The-WebGrid
Don't worry, that article is explained with EXCELLENT brevity and accuracy (and explained better than I could, so I leave it to Mike to vicariously answer that one).
I'm building a system in MVC that has a lot of heterogeneous data to be displayed: Customers, logs, etc.
I'm finding that I'm building the same view over and over again in different forms:
Header row (with sorting links)
Filter row (drop-downs, date pickers, etc.)
Data
Paging row
Naturally the abstractor in me is shouting "Build a generic data view factory!", as well it should. However, before I disappear up my own abstracting bottom, has this work already been done elsewhere?
The only option I can currently find is MVCContrib.Grid, which doesn't seem to handle the rendering of filters (although it has allowances for extending the renderer). Is this the only option?
As one may expect a question similar to your has already been done...years ago. So here: grid controls for ASP.NET MVC? you can find a list available data grids, that has been updated in the years. I recommend that you, once and for all, give a look to all of them, so in the furure you may choose the more adequate to your needs. There is no better grid, but each of them has advantages and disadvantages.
Yes, I could recommend this jQuery plugin
http://datatables.net/
My Choice would be between
datatables.net (Already mentioned)
jqGrid (http://www.trirand.net/demoaspnetmvc.aspx)
I've foud the datatables easier to use at first, but finally I've used jqGrid as I've foud it more powerfull.
I've used both KendoUI and jqGrid successfully. jqGrid is a light-weight and less expensive solution if all you are looking for is a grid. One of the things I liked about jqGrid aside from its easy integration with knockout was it's ability to edit data in table cells as well as creating a "edit view" in which the data is edited in a form-type view with labels beside edit widgets.
That said, it sounds like you might be looking for more than a grid, and if so you should also look at using Html helpers to generate the constituant parts (header w/filter, data rows, paging, etc). This would give you ultimate flexibility over where the different parts are rendered on the page. Maybe you want to put the paging controls twice on the page at the top and bottom; maybe you want to put the filtering into a modal dialog box. The ability to simply go:
#Html.FilterControlsFor(Model.PhoneBookUsers)
someplace (or someplaces) on a page and have the helper deal with all of the details is pretty powerful juju.
Flexigrid - nice table plugin, but it is only ui table you should provide appropriative server side processing for selection and filtering data.
KendoUI any day. Theres a ASP.NET wrapper but it's quite expensive. But the jQuery lib is definitly the best out there.
I have a table with 2K+ rows in it.
In chrome, firefox and IE8,9 it works fine, but in IE 7 the user will have to wait 30s or so...
The table is built using .NET's GridView.
According to some reading I've made, setting the width of the cells myself, rather than let the browser calculate it for each TD is better approach, and that what I've done...
What can I do to improve the loading time of the page?
Thanks in advance.
what you should do anyway is add paging and avoid showing 2K records on the same page inside a Grid. This should be done anyway also on the database access level, pointless to query all those rows out of the database, transport them to the web server and render them in the same page. Set up grid paging and limit the page size to something smaller usually between 20 to 100 depends on the context.
For a step by steg guide on how to enable paging, see here:
GridView Examples for ASP.NET 2.0: Paging and Sorting the GridView's Data
Like what Davide suggested, showing 2k rows is alot, and either cutting down that number or using something like http://www.datatables.net/ that can split it into multiple pages or all on one page but only loads the pages you can see.
It also supports async loading, so the users get a mucher better experience
Hi
Let's say that I've to list thousands of records for my client.
How should I implement this? Some say that I have to retrieve just 300 or 400 records from the database and show those to the client. But I think there will be some problem with pagination. If I get all records from the database then I will have a performance problem. Some say to implement our own store procedure. How should I do this?
Thanks
You definitely have to use paging and not retrieve all the records at once, I recommend using some ORM tool to abstract the complexity of the required query for paging, if using LINQ it would be something very simple: ...Skip((pageNo-1)*pageSize).Take(pageSize)
I am in favor of sending ~100 records with the page, paginating through them by JavaScript, and retrieving further records in a batch by some higher number, say, 1000, when user navigates to unloaded data. All with no-script fallback links if you can't force user's to use JavaScript.
(Not sure how easy this is with C# frameworks; with Java's Wicket, this is quite easy.)
Paginate the records ! That will the the only solution (which you haven't yet tried by the way!). You could add Button controls to move between pages, and data loaded to a page when the page is loaded. Or the records could be loaded all at once and stored by the app, and just shown to the user when a page is shown.
Paging is definitely an answer to this. However - Do all your match inside SQL Stored Proc.. Instead of depending on the GridView default paging...
If you don't want to use Paging (some clients are very adamant to show all records) then you can use Scroll event to fetch records on the fly. If you using a Web Application, you can use Ajax Call to fetch next set of records by passing the pageNo,pagesize etc....