I want to add rows to the datatable when the page is displayed using a javascript array.
I am trying to figure this out, but the row does not get add. Any help is appreciated..
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Your code works fine, but only with version 1.9.x (or earlier) of the plugin.
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Following the examples on the datatables.net web site for the latest version (1.10.x):
$('#dataTables-example').DataTable().row.add([
'1', '1', '1'
]).draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
From the API, this is one of the ways to add rows:
var dataTable = $('#dataTables-example').DataTable();
dataTable.row.add(['1','1','1' ]).draw();
Demo#Fiddle
To address the reinitialization warning challenge when using DataTables, you may want to try the retrieve option. www.datatables.net/manual/tech-notes explains how it works. You can read about Retrieve here.
In acknowledgement that the above code structure isn't always particularly
attractive, DataTables as a retrieve [DT] option which can be used to tell
DataTables that you are aware that the initialisation options can't be
changed after initialisation, and that should that occur, that you
just want the DataTable instance to be returned.
This optional parameter can provide a short-cut to the explicit check
using $.fn.dataTable.isDataTable() as above when obtaining a
DataTables instance:
table = $('#example').DataTable( {
retrieve: true,
paging: false } );
Maybe you can generate the row before and then append it to the tbody just using jQuery
$("#dataTables-example > tbody").append("<tr><td>row content</td></tr>");
Related
For some reason the pagination on my datatable isn't working... I get no errors and everything else seems to work fine except pagination...
This is what it looks like:
Clicking on the buttons does nothing and also returns no errors.
I am simply loading it in jQuery on page ready like so:
('#participantsTable').DataTable({
bSortable: true,
paging: true,
bFilter: true,
});
The sorting works, the filter works, just the paging doesn't.
The HTML looks like this:
<table id="participantsTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="participant-name">Simon</td>
<td class="participant-email">email#email.com</td>
</tr>
//20 more tr's
</tbody>
</table>
Does anyone have any idea? Thanks!
I am trying to sort in datatable but, i couldn't understand how to do it. let me show what i tired to do with my code.
$(document).ready(function() {
$('#table').DataTable();
} );
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" type="text/css" media="all" />
<table id="table" class="display" style="width:100%">
<thead>
<tr>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
#if($trades)
#foreach($trades as $trade)
<tbody>
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
</tbody>
#endforeach
#endif
</table>
I worked hard but unable to find what i have not done.
I think you need to move your #foreach to be inside of your <tbody> like this:
<tbody>
#foreach($trades as $trade)
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
#endforeach
</tbody>
To get the sorting to work, you'll have to add an option to your javascript like this:
$(document).ready(function() {
$('#table').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
Which will order your table by the 4th column (since the 3 in the above example starts counting indexes at 0) in descending order. Reference - https://datatables.net/examples/basic_init/table_sorting.html
i have a table with dynamic content coming from an Oracle Database, based on each row there is suppose to be another information coming from the Database on click event i.e. click on row with ID 1 and this executes an Ajax call with an query condition including the ID 1 than response should be shown in another table below the "basic" table.
I think i have to use something like:
$('.table > tbody > tr').click(function() {
// row was clicked
});
But i am not sure, since I want to use a PHP call to the DB, but the UX should be instantaneously like an Ajax action without loading the entire page.
The question:
How do I a make the table row clickable (possibly with that JS?)?
How do I parse the value from the row as condition as database call?
Ajax/PHP?
How do I handover the values into the second table?
Below is my code so far:
function show(nr) {
document.getElementById("table1").style.display="none";
document.getElementById("table2").style.display="none";
document.getElementById("table3").style.display="none";
document.getElementById("table4").style.display="none";
document.getElementById("table"+nr).style.display="block";
}
#table1, #table2, #table3, #table4 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-sm table-hover">
<tr>
<th onclick='show(1);'>ID</th>
<th>Name</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Peter Pan</td>
<td>Expected</td>
</tr>
<tr>
<td>3</td>
<td>Julia Spencer</td>
<td>Expected</td>
</tr>
</table>
<div id="table1">
<table class="table table-sm table-hover">
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Peter Pan</td>
<td>Expected</td>
</tr>
<tr>
<td>3</td>
<td>Julia Spencer</td>
<td>Expected</td>
</tr>
</table>
</div>
I want to format 2016-09-14T13:46:39+0000 to DD/MM/YYYY. The data is coming from a JSON file/url into a bootstrap-table. Is there a way to format this using bootstrap-table or javascript?
See jsfiddle
Thanks,
<table data-toggle="table"
data-url="https://api.myjson.com/bins/44564"
data-row-style="rowStyle">
<thead>
<tr>
<th data-field="createdAt">Created At</th>
</tr>
</thead>
Check this will resolve your issue.. Am using moment js to format data..
..
function dateFormat(value, row, index) {
return moment(value).format('DD/MM/YYYY');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<table data-toggle="table"
data-url="https://api.myjson.com/bins/44564"
data-row-style="rowStyle">
<thead>
<tr>
<th data-field="createdAt" data-formatter="dateFormat">Created At</th>
</tr>
</thead>
</table>
I have a table with couple of columns, one of which is a link, on clicking it, I am calling JQuery click event. On click I want to get the value of a another column, which is a sibling of this column(td). how can i get it.
HTML
<table class="table table-bordered table-hover">
<thead>
<th>RID</th>
<th>Mobile Number</th>
<th>Outlet Name</th>
<th>Place</th>
<th>Email</th>
<th>Balance</th>
<th>Stock</th>
<th>Password</th>
</thead>
<tr>
<td data-name="rid">5111879</td>
<td data-name="mobile">9066587654</td>
<td data-name="outlet">Rachels</td>
<td>Indhiranagar, BL</td>
<td>rach#yahoo.com</td>
<td><i class="fa fa-inr"></i>378665</td>
<td>TRANSFER</td>
<td>RESET</td>
</tr>
</table>
on clicking the id=retailer_stock, a modal pops up and should have the value of data-name='rid'. How should i do it.
Javascript
$('#retailer_stock').click( function(event){
console.log($(this));
console.log($(event.target).closest('tr').children("[id = 'rid']"));
console.log($(this).closest('tr').children("[id = 'rid']"));
console.log($(event.target).closest('tr').find("[id = 'rid']"));
console.log($(event.target).siblings("[id = 'rid']"));
console.log($(this).closest("[id = 'rid']"));
})
of these code lines, last two is not working, its not fetching me a result, can any of you explain why?
-thanks
Use:
$('#retailer_stock').click( function(e){
alert( $(this).closest('tr').children().eq(0).text() )
})
Check demo: fiddle
If you want to access that cell through data-name attribute use:
$('#retailer_stock').click( function(e){
alert( $(this).closest('tr').find('[data-name="rid"]').text() )
})
However if you plan to have many rows in the table, you will end up with many elements with same retailer_stock id. To avoid this you may decide to change id="retailer_stock" to class="retailer_stock" and then change selector to $('.retailer_stock').
Using the Click event from jQuery:
https://api.jquery.com/click/
Capture the click on "retailer_stock" then you can retrieve the HTML from "rid"
http://api.jquery.com/html/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('#retailer_stock').click(function (e) {
alert($(this).closest('tr').find('td[data-name="rid"]').text())
})
});
</script>
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<th>RID</th>
<th>Mobile Number</th>
<th>Outlet Name</th>
<th>Place</th>
<th>Email</th>
<th>Balance</th>
<th>Stock</th>
<th>Password</th>
</thead>
<tr>
<td data-name="rid">5111879</td>
<td data-name="mobile">9066587654</td>
<td data-name="outlet">Rachels</td>
<td>Indhiranagar, BL</td>
<td>rach#yahoo.com</td>
<td><i class="fa fa-inr"></i>378665</td>
<td>TRANSFER</td>
<td>RESET</td>
</tr>
</table>
</body>
</html>
$('#retailer_stock').click(function(e){
$(this).parent().find('[data-name="rid"]').text()
});