datatables
How to add checkbox option instead of dropdown for "show entries" in Datatable header
I want to remove the dropdown option from "Show entries" portion in Datatable's header. And need to add checkbox for how many rows to shows per page.
Solution
You need to combine some different techniques to implement this:
- Use the DataTables
domoption to customize the table layout. - Use a CSS grid layout in combination with the
domoption, to ensure the page length control is aligned with the search box. - Generate the page control HTML dynamically so it can be placed in the HTML generated by the
domoption. - Set an initial page length.
- Add an event listener to respond to page length changes.
- Use the DataTables
.page.len()function to actually change the page length.
Here is a demo for the above approach:
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: '<"dt-top-container"<"dt-left"><"dt-center"><"dt-right"f>>rtip'
} );
var pageLengths = ['5', '20', '50', '100'];
checkbox_html = pageLengths.map((length, idx) => {
let html = '<input type="radio" class="check-row" name="page_size"';
if (idx === 0) {
return html + ' value="' + length + '" checked>' + length;
} else {
return html + ' value="' + length + '">' + length;
}
}).join(' ');
$("div.dt-left").html(checkbox_html);
var intialPageLen = parseInt($('input[name=page_size]:checked', 'body').val());
table.page.len( intialPageLen ).draw();
$( 'body' ).on( 'click', 'input[name=page_size]', function() {
table.page.len( $( this ).val() ).draw();
});
} );.check-row {
display: inline-block;
margin: 0 2px 0 8px;
}
div.dt-top-container {
display: grid;
grid-template-columns: auto auto auto;
}
div.dt-left {
}
div.dt-center {
margin: 0 auto;
}
div.dt-right {
margin: 0 0 0 auto;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$217,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$345,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Radio Buttons not Check Boxes
I changed your check boxes to radio buttons, since these ensure that only one value is selected at a time.
Additional Notes
Change the page lengths array to whatever you want:
var pageLengths = ['5', '20', '50', '100'];
The HTML for these page lengths is built using the pageLengths.map() logic. The first value in the array is the one which is used for the initial table display.
The dom option is used to manage what gets placed in the top left hand field above the Datatable:
'<"dt-top-container"<"dt-left"><"dt-center"><"dt-right"f>>rtip'
This is where the CSS grid layout is used.
Finally, the click event is where we re-draw the table, to change the page length:
table.page.len( $( this ).val() ).draw();
- How to list all the removable devices with DBus and UDisks2?
- gobject/gnome/glib bindings for D using GIR?
- How do nested functions get compiled?
- The "this" pointer and message receiving in D
- 64-bit executables with DMD
- GtkD with D lang on Fedora
- Why Android used Java concept instead of D language or C or C++? But Chromium web browser is in C++, its very complicated match
- How to use MongoItemWriter to write a List<T>
- Why a function with protected modifier can be overridden and accessible every where?
- Convert Unicode const(uint)* to a dlang character type
- Compiling D with Code::Blocks
- DMD vs. GDC vs. LDC
- Rendering a font in raylib using freetype
- Digital Mars D compiler; acquiring ASM output
- D Programming: openssl rsa forward reference compiler error
- D compiler DMD doesn't link object files
- OPTLINK: Warning 23: No Stack
- Is there a limit in the amount of temporary generated symbols during a project build using dmd 2.063?
- Is this the right way to combine Garbage collected with none Garbage collected code in D
- D compiler (Digital Mars D Compiler) throwing error
- Which D Compiler to Use?
- Splitting a string treating multiple whitespace as one separator
- Proper way of passing array parameters to D functions
- Detailed Valgrind internals documentation
- Is it possible, in D, to tell the garbage collector to not scan a particular pointer (or anything below it)?
- Iterate over key/value pairs in associative array in D.
- Dlang associative array of an array of strings keyed by a string has unexpected behavior
- How to repeat a statement N times (simple loop)
- Is worth the effort to learn D?
- ld: undefined reference to object I can see in objdump