Hi i want to add the row selection check box in data table, also need to add the check box against every row. So that it will select the row individually.
Thanks.
You can use following code
JS:
$(document).ready(function() {
$('#example').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'asc' ]]
} );
} );
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
</tr>
</table>
Related
I always get this error DataTables warning: table id=dataTable - Cannot reinitialise DataTable. For more information about this error, please see here when the page loads.
i find it hard to use the search, pagination and entry functionalities. please i need your help.
<html>
<body>
<table class="table table-striped table-bordered table-hover" id="dataTable" cellspacing="0" style="width="100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<?php $sql = "SELECT * FROM users WHERE Status='1' ";
$query = $dbh->prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0){
foreach($results as $result)
{ ?>
<tbody>
<tr>
<td><?php echo htmlentities($result->UserId);?></td>
<td><?php echo htmlentities($result->Username);?></td>
<td><?php echo htmlentities($result->Fullname);?></td>
<td><?php echo htmlentities($result->Position);?></td>
<td><?php echo htmlentities($result->Gender);?></td>
<td><?php echo htmlentities($result->Email);?></td>
<td><?php echo htmlentities($result->Telephone);?></td>
</tr>
</tbody>
<?php }} ?>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>
</body>
<script>
$(function () {
$('#dataTable').DataTable()
$('#dataTable').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
})
})
</script>
</html>
First of all you have error here: style="width="100%" needs to be style="width:100%"
Then you call your table twice ('#dataTable').DataTable. As explained in link YOU provided.
There is also good number of examples how to start using that plugin.
Also you had 8 columns in table head and 7 in table body witch produces a error. You need to mach those numbers.
I have also included script into body and just to be sure called it on document ready. It works as seen below.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="dataTable" class="display" style="width:100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>
<script>
$(document).ready(function() {
$('#dataTable').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
} );
} );
</script>
</body>
</html>
So your code should be:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table class="table table-striped table-bordered table-hover" id="dataTable" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th style="width: 23%">Action</th>
</tr>
</thead>
<?php $sql = "SELECT * FROM users WHERE Status='1' ";
$query = $dbh->prepare($sql);
$query->execute();
$results=$query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0){
foreach($results as $result)
{ ?>
<tbody>
<tr>
<td><?php echo htmlentities($result->UserId);?></td>
<td><?php echo htmlentities($result->Username);?></td>
<td><?php echo htmlentities($result->Fullname);?></td>
<td><?php echo htmlentities($result->Position);?></td>
<td><?php echo htmlentities($result->Gender);?></td>
<td><?php echo htmlentities($result->Email);?></td>
<td><?php echo htmlentities($result->Telephone);?></td>
<td>Missing column!</td>
</tr>
</tbody>
<?php }
?>
<tfoot>
<tr>
<tr>
<th>User Id</th>
<th>Username</th>
<th>Fullname</th>
<th>Position</th>
<th>Gender</th>
<th>Email</th>
<th>Telephone</th>
<th>Action</th>
</tr>
</table>
<script>
$(document).ready(function() {
$('#dataTable').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
})
});
</script>
</body>
</html>
Hi I have the following table design. I dont want the first and last column to be sortable. I have set accordingly.But the icon asc still appears on the first column but not on the last column. But when I try to sort the second column it goes off.
<table id="userTable" name='userTable' class="table table-striped table-bordered bootstrap-datatable " data-column-defs='[{"sortable": false, "targets": [0,3]}]' style='table-layout: fixed;'>
<thead>
<tr>
<th class="no-sort" style='width: 10%;'>No.</th>
<th style='width: 25%;'>First Name</th>
<th style='width: 20%;'>last Name</th>
<th style='width: 25%;'>Details</th>
</tr>
</thead>
</table>
Even if you disable sorting for a column, the dataTables sort order still remain. By default order is [0, 'asc']; simply set order to target the #2 column instead :
var table = $('#example').DataTable({
//....
order: [[ 1, "asc" ]] //column indexes is zero based
})
demo -> http://jsfiddle.net/6k26o7mk/
Or use order: [] if you not want any default order at all (icons will be hidden until the user sort the table).
In version 1.10.20 it worked for me just like this:
$(document).ready(function(){
$('#example').DataTable({
ordering: false, //disable ordering
initComplete: function( settings, json ) {
$("th").removeClass('sorting_desc'); //remove sorting_desc class
}
});
});
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
I was not able to get this working on datatables version: 1.10.11 with the DataTables download builder
Being that case, I used jQuery as a workaround to remove the sorting class, which in turn will remove the icon.
$(document).ready(function () {
$('#my-dataTables').DataTable({
paging: false,
ordering: false,
info: false,
});
// Removes icon
$('.sorting_asc').removeClass('sorting_asc');
});
I have created page with Datatable and its code is given below
$('#test').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "http://www.****.com/***/patientInfo"
} );
This ajax URL will give list of Patients list in JSON format
<table id="test" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
Now i couldn't achieve it. I got an error, i prompting that Datatable Warning: Table id=test, Invalid JSON response.
I want to show all the JSON data in the Datatable from Ajax URL.
How can I achieve this?
I have a datatable that loads about 20,000 (minimum) numbers (rows of data) . With that said , i use the pipeline feature of jquery datatables since it easily handles a large chunk of data .
The issue is that i want to know how to add a new row dynamically by passing the id to it .
Below is my jquery code :
$(document).ready(function() {
available_numbers();
function available_numbers(){
$('#available_numbers').dataTable( {
"processing": true,
"serverSide": true,
"ajax": $.fn.dataTable.pipeline( {
url: 'fetch_available_numbers.php',
pages: 5
})
} );
}
} );
And below is the table :
<table id="available_numbers" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Phone Number</th>
<th>Assigned To (User Group)</th>
</tr>
<tfoot>
<tr>
<th>Phone Number</th>
<th>Assigned To (User Group)</th>
</tr>
</tfoot>
</table>
The values are fetched in json format , just like the server side script in datatables .
Thanks.
How can I retrieve this line of echo code from my php file to my jquery and I am expecting rows of values.
my php file
foreach($stmt as $warrior){
echo '<td>'.$warrior['warrior_id'].'</td><td>'.$warrior['warrior_name'].'</td><td>'.$warrior['warrior_type'].'</td>';
}
my js script
<script>
function createWarrior() {
$.post( "create_warrior.php", {
"wname": $("#txtWname").val(),
"wtype": $("#txtWtype").val()
},
function(msg){
//What should I put here
});
return false;
}
</script>
my html code
<table>
<tr>
<th colspan="3">Warrior</th>
</tr>
<tr>
<th>Warrior ID</th>
<th>Warrior Name</th>
<th>Warrior Type</th>
</tr>
<tr>
//the output should be here
</tr>
add tags <tr> at the beginning and end
foreach($stmt as $warrior){
echo '<tr><td>'.$warrior['warrior_id'].'</td><td>'.$warrior['warrior_name'].'</td><td>'.$warrior['warrior_type'].'</td></tr>';
}
the result will be
<tr><td>warrior_id_1</td><td>warrior_name_1</td><td>warrior_type_1</td></tr>
<tr><td>warrior_id_2</td><td>warrior_name_2</td><td>warrior_type_2</td></tr>
....
this answer you need to get in the js and append to html:
<script>
$.ajax({
url: 'create_warrior.php',
//Send data to php if you need. In php use $_POST['wname'] to read this data.
data: {wname: $("#txtWname").val(),wtype: $("#txtWtype").val() },
success: function(data) {
$('#dataTable').append(data);
}
});
</script>
HTML
<table id = "dataTable">
<tr>
<th colspan="3">Warrior</th>
</tr>
<tr>
<th>Warrior ID</th>
<th>Warrior Name</th>
<th>Warrior Type</th>
</tr>
</table>
Something like (note the added <tr></tr>)
foreach($stmt as $warrior){
echo '<tr><td>'.$warrior['warrior_id'].'</td><td>'.$warrior['warrior_name'].'</td><td>'.$warrior['warrior_type'].'</td></tr>';
}
with
<script>
function createWarrior() {
$.post( "create_warrior.php", {
"wname": $("#txtWname").val(),
"wtype": $("#txtWtype").val()
},
function(msg){
$('#mytable').append(msg);
});
return false;
}
</script>
and
<table id="mytable">
<tr>
<th colspan="3">Warrior</th>
</tr>
<tr>
<th>Warrior ID</th>
<th>Warrior Name</th>
<th>Warrior Type</th>
</tr>
</table>
should work I believe, didn't try it.