i'm trying to create search box datatables outside the table, i'm using datatables version 1.12.1, i use the reference from website and it won't work, the search box is not working.
The result:
oTable = $('#example').dataTable();
$('#myInputTextField').keyup(function() {
oTable.search($(this).val()).draw();
})
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<input type="text" id="myInputTextField">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</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>Foo bar</td>
<td>Engineer</td>
<td>Glasgow</td>
<td>45</td>
<td>2012-05-26</td>
<td>$100,800</td>
</tr>
</tbody>
</table>
To get a reference to the datatable instance you need to use DataTable() - not dataTable(). The latter provides a jQuery object.
I would also suggest using the input event for the search box as it allows users to input text any possible way, not just using the keyboard.
let oTable = $('#example').DataTable();
$('#myInputTextField').on('input', function() {
oTable.search($(this).val()).draw();
})
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<input type="text" id="myInputTextField">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</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>Foo bar</td>
<td>Engineer</td>
<td>Glasgow</td>
<td>45</td>
<td>2012-05-26</td>
<td>$100,800</td>
</tr>
</tbody>
</table>
Related
This question already has answers here:
How can I remove the search bar and footer added by the jQuery DataTables plugin?
(22 answers)
Closed 3 months ago.
I've a custom search bar built into my website, and I wanted to hide the default Datatables search bar, I still need the search function but without the default search...
I've tried to hide the default search bar by using CSS, but it didn't work I also tried to disable bInfo and bFilter but it will disable the search function completely...
Here is some code:
<script>
var oTable = $('#players_tools').DataTable({
paging: false,
info: false,
//searching: hide...
});
$('#players_search_tool').keyup(function() {
oTable.search($(this).val()).draw();
});
</script>
If you check the example you can see that it contains
<div id="example_filter" class="dataTables_filter"
you can use
$(".dataTables_filter").hide();
to hide that part.
Let's try it:
$(document).ready(function () {
$('#example').DataTable();
$(".dataTables_filter").hide();
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</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>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
I have a nested data table which is not being displayed properly, it doesn't display the plus and minus sign , neither the pagination.
It seems like I am loading some styling wrong but I cant see where. I followed a JSFiddle example which works there but when I copy it in my computer it doesn't.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/r-2.2.1/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/r-2.2.1/datatables.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable({
'responsive': true
});
// Handle click on "Expand All" button
$('#btn-show-all-children').on('click', function() {
// Expand row details
table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
});
// Handle click on "Collapse All" button
$('#btn-hide-all-children').on('click', function() {
// Collapse row details
table.rows('.parent').nodes().to$().find('td:first-child').trigger('click');
});
});
</script>
</head>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th class="none">Age</th>
<th class="none">Start date</th>
<th class="none">Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<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>
</tbody>
</table>
</html>
I am new to HTML and datatables so probably I am making stupid mistake somewhere but I cant detect.
first time using electron.
Using the code provided on datatables.net the selection doesn't work.
Maybe I'm doing something wrong with electron or other...
Here's the Javascript code
$(document).ready(function() {
$('#example').DataTable( {
select: {
style: 'os',
blurable: true
}
} );
} );
Here's the HTML code
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</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>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>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
Any suggestion will be appreciated
Responsive Datatable with child rows works on DataTables own page example, but the same code dosen't work on my HTML page. No '+' button shows and all the child columns are included in the main table. I have tried using all the examples but getting the same result.
table without expand/collapse icon
I'm using this example for this question
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
} );
} );
</script>
</head>
<body>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
</tr>
<tr>
<td></td>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</tfoot>
</table>
</body>
</html>
Also, copying the whole source of the example page in local html gives the same result. But the example in the page itself i.e. by opening page as link in datatables site works in chrome.
as I said in the forum, it does work - have you tried resizing the screen? Bear in mind you only see the child rows when the screen has shrunk enough that the whole line cannot be displayed.
I have a table which is hidden when the page is loaded and has not data in it.
After the user click a button the table is then populated and finally shown.
Like this:
tr = $('<tr/>');
tr.append("<td>somedata here</td>");
$('#mytable').append(tr);
$('#mytable').show();
and here's the table:
<table id="mytable" class="table table-striped table-bordered" style="display:none">
<thead>
<tr>
<th>Data below</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My problem is that I've tried plenty of plugins including dataTables and they just don't work.
I need to find either a way to get the plugins to work or find a way of doing pagination that works with the way I'm populating the table.
How can I do this?
You can use datatable. It will automatically handle pagination
Here is working demo :
$(document).ready(function() {
$('#example').DataTable();
var dataTable = $("#example").dataTable().api();
$("#addRow").click(function() {
tr = document.createElement("tr");
tr.innerHTML = "<tr><td>New row </td><td>Test</td><td>45</td></tr>";
dataTable.row.add(tr);
dataTable.draw();
});
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger</td>
<td>System Architect</td>
<td>61</td>
</tr>
<tr>
<td>John deo</td>
<td>System Architect</td>
<td>61</td>
</tr>
<tr>
<td>Jane Deo</td>
<td>System Architect</td>
<td>61</td>
</tr>
</tbody>
</table>
<button id="addRow">Add Row</button>