I have already implemented TableSorter in my project. Now the problem is that in some case I need many records more than thousand. And TableSorter plugin does pagination client side through ajax. I want it to do server-side pagination + I want to sort on a single page, not on whole data. i.e. If there are 10 records on a single page of TableSorter, sorting must be done on that single Page(on that 10 records only). I can't change to another table plugin. What should I do? My data is coming from model.
For the pager ajax demo, I had to change the serverSideSorting option manually to make it sort the current table contents. Maybe that will also work for you? Try including this code:
$('table').bind('pagerInitialized', function(e, c){
// allow current content sorting; this variable is automatically
// set to true when ajax is initialized
this.config.serverSideSorting = false;
});
Related
In my Cypress test, I'm comparing the data on a HTML table (which is paginated) against expected values (which are stored in an array).
Also, the number of records in the table is can vary.
The current amount of rows appearing on the table (the first page) is 5 records, and users can navigate to the other records using the Next/Previous/First/Last buttons as usual.
Here is my latest Cypress code:
cy.task('queryDb', `${myQuery}`).then(result => {
for (var i = 0; i < result.length; i++) {
dashboard.name(i).should('have.text', ` ${result[i].name} `)
}
})
The above for loop works for the 5 companies that appear on the UI, but it doesn't loop through the records that aren't visible on the screen.
Can someone please tell me how I can validate the remaining companies in the table?
Do I only do this for the first 5 records, click the 'Next' button, & then do the same for the next 5 records?
There are two very different things, and you may want to separate them into two tests:
You want to test the method that populates your HTML table and make sure you retrieve the expected results
You want to ensure that your HTML table is working as expected with the proper pagination
For (1) it would be easier to test your HTML table query URL and see if you can query all without the pagination. In this way, you will be able to ensure that the retrieved data are correct.
For (2) you know the data are correct. You want to make sure they are displayed as expected.. It may be helpful to try and validate the next and previous buttons.
In this way, you will know if the problem comes from the logic inside your UI component or if it comes from your backend.
i'm implementing a web page that shows certain rows fetched from a database.
At loading, i make an AJAX request to fetch the rows in a certain range of time(the initial call will take today's rows), and save them in a global variable(e.g "rows").
I have two text field to set the starting and the ending point of my research, and every time i change the value of those text-fields, i make another call to the db to get the new data and update global "rows" variable.
My question is: if i have different text-field filters and sort options that apply filters and sort to the fetched rows, should i make another request to the db(with the selected filters/sort) and let the db handles the filter/sort, or should i apply the filters/sort directly the global "rows" variable?
Of course i think the db filtering and sorting would be more efficient, but the number of rows shouldn't be more than 100, max 200 rows, and i was wondering if it would be worth it to make another AJAX request just for filter the result.
Thank you very much in advance.
have you try with datatables server side??
https://datatables.net/examples/data_sources/server_side.html
I think is a good options for you and very easy to implement
How do I get the search/filter to work per column?
I am making small steps in building, and constantly adding to my data table, which is pretty dynamic at this stage. It basically builds a datatable based on the dat that is fed into it. I have now added the footer to act as a search/filter, but unfortunately this is where I have become stuck. I cannot get the filer part to work. Advice greatly appreciated.
here is my sample data tables that I am working on http://live.datatables.net/qociwesi/2/edit
It basically has dTableControl object that builds by table.
To build my table I need to call loadDataFromSocket which does the following:
//then I have this function for loading my data and creating my tables
//file is an array of objects
//formatFunc is a function that formats the data in the data table, and is stored in options for passing to the dTableControl for formatting the datatable - not using this in this example
//ch gets the keys from file[0] which will be the channel headers
//then I add the headers
//then I add the footers
//then I create the table
//then i build the rows using the correct values from file
//then I draw and this then draws all the row that were built
//now the tricky part of applying the search to each columns
So i have got this far but the search per column is not working. How do I get the search/filter to wrok per column?
Note this is a very basic working example that I have been working off: http://jsfiddle.net/HattrickNZ/t12w3a65/
You should use t1.oTable to access DataTables API, see updated example for demonstration.
Please compare your code with jsFiddle in your question, notice its simplicity and consider rewriting your code.
I have 100,000 records right now (will grow in future). I have JSON api call (remote URL, however, within same server) to get those records. If I use KendoUI with paging turned on (say 50 per page), will KendoUI datasource going to fetch all those records and bring them into client and apply paging? Or is it something I need to pass to the server (page size) to be able to only get only needed data for display? If I need to pass, do I have to write custom data source query methods?
Same question goes for using filter input boxes in toolbar within KendoUI.
There are two (efficient) ways of loading that amount of data:
Setting serverPaging to true in the DataSourcedefinition.
Using serverPaging plyst (as #bobosov534 and #gitsitgo suggests) virtual scrolling.
In the both you receive in the server tow parameters: top indicating the number of records to retrieve (what you have defined as pageSize) and skip for the number of records to ignore (no skip means the first top records).
The difference is that int the first you see a pagination bar in the bottom of the grid and in the second you see additional records as you scroll down.
In DataSource.serverPaging you find detailed information on the fields sent to the server for managing pagination.
I'm using a grid which have editurl: "clientArray",datatype: 'xmlstring', datastr: '<%=_xml_string %>'.
I have a button in my page , and when i click it i make an ajax call and get an xml containing new rows that i want to add to my grid.
Currently i'm looping through the xml rows and using addRowData for each row.
My question is how can append these rows to the current grid? I want the rows that are currently in the grid to still be there and append to them the new rows from the xml i get.
Thank's In Advance.
You can for example prepare an array of data with the new rows. You can add all the rows in one call of addRowData (read the documentation for more information about different parameters of addRowData).
The things will be more easy if you would return JSON data from the server instead of XML. It is recommended for the most situations. Then you can just make one call of addRowData with the data returned from the server to append there to the grid. Optionally you can needed to use small customization of the localReader (see here for more information)
depending on the formatting of the returned data, you could use addXMLData, however you may have to manipulate the returned XML first in order to have it format correctly.