Datatables is a powerful plug-in for jQuery that simplifies the process of creating interactive data tables on web pages. One feature that users often want to customize is the number of results displayed per page. In this guide, we'll show you how to easily change the default results per page value in Datatables to better suit your needs.
To begin, you'll need to have a basic understanding of HTML, CSS, and JavaScript to follow along with this tutorial. Let's dive in!
Step 1: Initialize Datatables
The first step is to ensure you have included the necessary Datatables library in your HTML file. You can either download the library and host it locally or include it using a CDN. Make sure to also include the jQuery library before the Datatables script.
<table id="myTable">
<!-- Your table content here -->
</table>Step 2: Initialize Datatables with Custom Page Length
Next, you'll need to initialize Datatables on your table and specify the default page length you prefer. The `lengthMenu` option allows you to define the available options for the user to choose from.
$(document).ready(function() {
$('#myTable').DataTable({
"lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ],
"pageLength": 10 // Set your preferred default value here
});
});Step 3: Customize Results Per Page Dropdown
If you want to customize the dropdown options for the results per page, you can modify the `lengthMenu` array values to suit your needs. In this example, users can choose between displaying 5, 10, 25, 50 results, or show all entries.
Step 4: Test Your Changes
Now that you've set up your Datatables with a custom results per page value, test your changes by refreshing your web page. You should see the table displaying the number of results you specified as the default value.
Congratulations! You've successfully learned how to change the results per page value in Datatables. Feel free to explore further customization options offered by Datatables to enhance your user's experience.
Remember, practice makes perfect! Keep experimenting and expanding your skills to become a coding wizard with Datatables. Happy coding!