jQuery Datatable Multi Select-Checkbox
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Amruta
In this article we will show you the solution of jQuery datatable multi select-checkbox, here we needs to create datatable with the help of open source external library supports ‘datatable, select.datatable’.
The datatable is a powerful and smart html table enhancing plugin provided by jQuery Javascript library.
It highly flexible tool that basically created to display information in table and we can interact to them, enhance the accessibility in html table.
Step By Step Guide On jQuery Datatable Multi Select-Checkbox :-
Here we needs to import external jquery library support links of datatable then only we can create datatable.
In script block we appending DataTable with table id ‘exm’ within that we specified ‘columnDefs, select, order’ which common and need to define when creating datatable.
In html block we defined table with id ‘exm’, class ‘display’ and in this table we specify header and body of table description then it contains three columns for each row with checkbox which is created by datatable we just need to define empty columns ‘td’ at first column in each row.
<!DOCTYPE html>
<html>
<head>
<title>Datatable Multi Select Checkbox</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
<body>
<script>
$(document).ready(function () {
$('#exm').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'multi',
selector: 'td:first-child'
},
order: [[1, 'asc']]
});
});
</script>
<table id="exm" class="display" style="width:100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Harry</td>
<td>Interior Architect</td>
<td>61</td>
</tr>
<tr>
<td></td>
<td>Vinay</td>
<td>Andriod Developer</td>
<td>61</td>
</tr>
<tr>
<td></td>
<td>James</td>
<td>Sales Assistant</td>
<td>59</td>
</tr>
<tr>
<td></td>
<td>Mark</td>
<td>Accountant</td>
<td>55</td>
</tr>
<tr>
<td></td>
<td>John</td>
<td>Javascript Developer</td>
<td>39</td>
</tr>
</tbody>
</table>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported external open source jquery library support files related datatable which are css and js and needed for coding import external jquery cdn in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we needs to append ‘DataTable’ with table id ‘exm’ for generate datatable. The ‘columnDefs’ used to provide types of definition for table columns, here ‘orderable’ set to false for change the default order to [1, 'asc'] order which starts from first column instead of starts from ‘0’.
- The ‘className’ set to ‘select-checkbox’ which is added on each column for apply styles. In select property we sets ‘style’ to ‘multiple’ which describes style of selecting type, ‘selector’ sets as 'td:first-child' which means in table first column we sets as selector.
- In html block we defined table with id ‘exm’, class ‘display’ there we defined five rows which including headers ‘Name, Position, Age’ and remaining are data which are defined with one empty column for apply checkbox at first cell.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create datatable multi select checkbox using jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see table with four rows of specified data with checkboxes at first column in each row there user can select multiple rows at a time by selecting checkbox.
I hope this article on jQuery datatable multi select-checkbox helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
