Discussion on DataGrid - JavaScript Pagination, Sort and Filter

Discussion on DataGrid - JavaScript Pagination, Sort and Filter

Cart 124 sales
Recently Updated

js-ocean supports this item


17 comments found.

This plugin would be perfect if it had “OR” filtering logic.

This feature has been added. Please check out the documentation here –

Thank you for the reset option. A much-needed update. Thanks again

You are welcome!

Hi, Is it possible to display products of one category and enable pagination?

I have a lot of different filter links and I choose not to add checkbox fields for all of them at the top of the page. Is there a way to “Reset All” with a single click?

Hi, There is an example of reset button in the following location in the downloaded archive: /main/5-other-examples/reset-button/index.html

Please let me know if it helps and have a great day

Writing to back to let you know if it helps.

1) I realized I may had an earlier version of the script because the path did not make sense but I downloaded from Codecanyon and problem solve. I found your example

2) Problem – It seems for this to work checkboxes for each of the tags such as “Men”, Women” need to be displayed as checkboxes on the page. Is that true? I did a text and removed the “Men” checkbox code. I was able to filter and un-filter using the “Men” link filter but I was not able to reset the filter using the reset button. Is there a way to reset the filter without display what, for me, would over 100 checkboxes?

hello good product but I have found an error when I load the select data via ajax when choosing an option it filters well but it always stays selected in the first option please if you can correct this it would be great

Hi, Thank you for purchasing the plugin. To fix the described issue, you may try the following:

First perform your ajax request, and only then call DataGrid init function – datagrid();

This way the library will be executed after the ajax call is finished. Thanks and have a great day

I already tried it and it didn’t work either I want a refund the product is not what I expected

Sure, no problem. Please send the refund request and I’ll approve it.

Warning, there’s a huge flaw with the filtering logic in this plugin. You can’t change the filtering logic from ‘and’ to ‘or’. Say you are filtering food and you like pizza and sushi. This plugin won’t allow you to check ‘pizza’ and ‘sushi’ and return any results. It will only show a single item that is flagged both pizza and sushi at the same time. This makes this plugin completely useless in most cases. The author doesn’t even reply to support requests. Don’t waste your time with this plugin.

This feature has been added. Please check out the documentation here –

I want to use it in a database with 10k of items. Can I used it ? or it’ll slow down the loading, and then, ajax is supported ?

Hi, The DataGrid library doesn’t support ajax now, and it takes data from the HTML printed on the page. So it’s not won’t work for the database with 10k items.

Can this work with a slider control to filter items based on a numerical range? I imagine 1990 to 2021 or something like that. Thank you.


It took me some time but I got it to work with my template. I see why you recommended the radio button. I just added an “id” declaration to the input tag for the radio button filter and referred to it in the label and that worked well or me.

Also, if anyone is interested I got this working with Google Sheets Spreadsheet as a backend database. You can check my profile for more info.

I’m glad it worked for you.

how can i make it so only 1 option can be clicked at once, i have button filter, once you select one, then select the 2nd nothing is shown

Hello, If you need only one option selected at once, please use “radio button filter” as described here: It also may be styled like a button. Please send an email via support form if you need more help.

Congratulations! Nice Work, GLWS :)

Thank you!

Building minified version. i am trying to run npm build but it is taking forever: most of the components are deprecated. Any suggestions? Thanks

To update all the packages to the latest version, you may “npm update” command as described here –

thanks for this great script. One question when I go to an example page it appears to default to a field alphabetically That is fine for a search but I want when a person first goes to a page to see them in order of most recent post. Then they can search by title asc or desc as the drop down box does. Is this possible?

Hi, Thank you for purchasing the product. To make some option selected on page load, you may add “selected” property on the relevant option. For example: <option selected data-path=”.title” data-direction=”asc” data-type=”text”>Sort by title asc</option>

Please see the documentation here:



Nice plugin, in a good price. I got how it works, I need to put all my records from database to HTML page with data attributes, to be able to paginate and filter them. With a small asterisk, that’s ok for me.

What I want to know are:

  • How many records do you think that it can support in the page? I don’t need an actual number, just a general. eg 50, 100, 300….
  • Every item in the page should have a link to a separate page with product details. Is there any “flag” to redirect user back to the page that he was before? eg Somone is on the 3nd page of listing and then clicks to see product page. When he clicks the Back button, can he redirect to 3nd page, or he’ll go to the 1st page of the listing?

Thank you and good luck in your sales,


(1) It depends on your HTML, as one item can be just a small

tag or a complicated HTML structure. But generally speaking, I believe it could work up to 500 items per page, depending on browser and device.

(2) It could work if you use the deep link feature as described here: Please see the following deep link example:

You may go to page 2, then to the homepage, then click the back button -> and you return to page 2 automatically.

Thank you

Hi one question, if i wanna have a pagination on the page gallery from my site and another pagination on the page of blog , how can i do?

In this case, on the first page you can pass pageSize: 2, and on the second page pageSize: 6

datagrid({ pageSize: 2 // first page }); datagrid({ pageSize: 6 // second page }); You may also use page size control as described here:

Thanks, I already found the problem, in my case I am using wordpress, and for it to work it is necessary to insert the code datagrid({});, independently on each page

I’m glad you’ve found the solution

How well will this work with mysql database?

The library works with HTML and doesn’t require ajax calls. It collects all needed data from HTML tags and then sorts/filters/paginates, according to the settings provided via data attributes.

Hi nice work) This script goes with demo page ? and with all demo pages like shoe product list, real estate demo , restaurant demo ? So all files i can edit in html format ?

Hi, Thank you for your interest. All demo pages are included (except the images that are linked directly from Unsplash). You could edit and match any demo for your needs.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey