I have a table containing parent and child rows. Child rows can be collapsed using bootstraps default collapse mechanism. All rows can be reordered using datatables rowReorder. Now if I drag&drop a parent row, it's child rows are not moved, of course. How can I achieve that behavior?
Here's a jsfiddle of what I currently have, use the salary column to start dragging a row:
$(document).ready(function() {
var table = $('#example').DataTable({
"columnDefs": [{
targets: 0,
visible: false
}],
rowReorder: {
selector: 'td:last-child'
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/rowreorder/1.1.2/css/rowReorder.dataTables.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/rowreorder/1.1.2/js/dataTables.rowReorder.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" />
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Seq</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Seq</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td><i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed1">+</i><b>Tiger Nixon (parent)</b>
</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr class="collapse collapsed1">
<td>2</td>
<td>Garrett Winters (child)</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr class="collapse collapsed1">
<td>3</td>
<td>Ashton Cox (child)</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>4</td>
<td><b>Cedric Kelly(parent)</b>
</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>5</td>
<td><b>Jenna Elliott (parent)</b>
</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<br/>
<ul>
<li>Collapse/show child entries of Tiger Nixon using the plus sign.</li>
<li>Drag rows by touching the salary column.</li>
</ul>
</div>
Use DataTable's child feature instead.
Here's the JSbin of demo
http://live.datatables.net/cihefawi/17
Modify it to add child rows dynamically, using ajax or something.
Your implementation of parent and child rows is not right because you are not using any of the existing data table features here.
You are adding a patch(collapsible) for parent-child rows and for it to support you will have to add many other patches as well to support other features of data tables, like: sorting, searching etc.
I would recommend you to look at this link. It shows how you can implement collapsible data/details. You can modify the content to look like a row but still the features of data-tables will not work on those rows. Ideally they are only supposed to work on parent rows. Rest depends on your requirements and implementation.
Related
I'm trying to put a search bar for my datatables. I have to hide the search engine that has datatables by default but I added a script where I found in some forum that works correctly but when executed in my code it does not work, it shows an error in the console.
var tables = $("#example").dataTable({
"mark": true,
"bPaginate": false,
"showNEntries" : false,
"bInfo" : false,
"language": {
"zeroRecords": "No se encontraron rutas"
},
'searchHighlight': true,
});
$("#seachBox").keyup(function () {
tables.draw();
});
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<label for="">Buscar:</label>
<input style="margin: 10px;" id='seachBox' placeholder="Buscar">
<table id="example" class="display nowrap" 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>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
What I want to achieve is that my new input performs the search as the datatables input does but it gives me an error and I can't find the possible solution and also the 'searchHighlight': true doesn't work for me.
Any recommendations please I'm new using datatables
You need to include the highlighter libraries, which are listed on this page - but note, you need to add the https: protocol to the start of the URLs given in that page, for reasons explained here.
I recommend using dom: 'ti' as documented here to hide the default global search box (since you want to use your own search box instead). Specifically the f (filter) option is not listed - only the t and i options. But you can add others if you want to (e.g. if you decide you do want to use pagination).
Instead of dataTable({...}) use DataTable({...}). The difference is small - but worth understanding - see here for a description.
To use the external search box, you can use this:
$('#seachBox').keyup(function(){
table.search( $(this).val() ).draw() ;
})
My code is a slightly updated version of the code in this existing answer.
Putting it all together, here is a demo - I deliberately excluded Bootstrap - but if you want to use it, you can grab the correct libraries from the official DataTables download page.
$(document).ready(function() {
let table = $('#example').DataTable({
dom: 'ti',
searchHighlight: true
});
$('#seachBox').keyup(function() {
table.search($(this).val()).draw();
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<!-- for search highlighting -->
<script type="text/javascript" src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.13.1/features/searchHighlight/dataTables.searchHighlight.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/1.13.1/features/searchHighlight/dataTables.searchHighlight.css" />
</head>
<body>
<div class="container" style="padding: 20px;">
<label for="">Buscar:</label>
<input style="margin: 10px;" id='seachBox' placeholder="Buscar">
<table id="example" class="display nowrap" 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>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here is what it looks like with a search using the text ar:
I have a table draw by DataTables. For every rows, last column of the table is a buttom which shows other jquery element (bxslider in my case, but it does not matter here). I want to be able to change the color of a row when I click on it buttom. I found some solutions but these only change the color before draw a DataTable, not running when a DataTables is draw already.
The buttoms have the html class "onclick".
I draw a datatable as follows:
$(div).DataTable({"data" : dataSet, "columns": columns})
Haw can I do that?
Thank you, regards.
Mike
Will something like this work?
//initialise datatables on DOM load
$(document).ready(function() {
$('#example').DataTable();
});
//on clicking the row
$("tbody tr").on("click", function() {
//loop through all td elements in the row
$(this).find("td").each(function(i) {
//toggle between adding/removing the 'active' class
$(this).toggleClass('active');
});
});
/* Set !important rule to override default colors */
.active {
background: gold !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" 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>
<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>
$('#dataTable').on('click', 'tr', function () {
$(this).css("background-color", "#eeeeee");
});
I have problem to print all data in data table that have pagination. I have already do research and found this same question in this link
Print <div id="printarea"></div> only?
Printing multiple pages with Javascript
but some of the coding wont work in my project or maybe i dont understand the coding.
this is the example coding that i already tried..so basically i have 19 data in the database ..but in this page i limit it to 15
so when i click button print i dont have to go to every page to print all the data in data table.
this is the code that i use for button print
<div id="printableArea">
<h1>Print me</h1>
Javascript
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
So for this Table if you apply the print option it will print all the data that are available since if it under pagination also as required by you.
DataTables is a plug-in for the jQuery JavaScript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
You can apply Datatable to any table as per your wish.
Js to be added on your page:
$(document).ready(function(){
$('#myTable').DataTable();
});
CSS:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
JS:
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
HTML Table:
<div id="printableArea">
<table id="myTable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>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>
<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>
</table>
</div>
Hence if you apply the datatable for this Table you will receive an output like this.
Output:
Try This Code
HTML Code
<div id="printableArea">
<table id="printableAreaTable" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC1</td>
<td>100000</td>
</tr>
<tr>
<td>2</td>
<td>ABC2</td>
<td>100000</td>
</tr>
<tr>
<td>3</td>
<td>ABC23</td>
<td>100000</td>
</tr>
<tr>
<td>4</td>
<td>ABC4</td>
<td>100000</td>
</tr>
<tr>
<td>5</td>
<td>ABC5</td>
<td>100000</td>
</tr>
<tr>
<td>6</td>
<td>ABC6</td>
<td>100000</td>
</tr>
<tr>
<td>7</td>
<td>ABC7</td>
<td>100000</td>
</tr>
<tr>
<td>8</td>
<td>ABC8</td>
<td>100000</td>
</tr>
<tr>
<td>9</td>
<td>ABC9</td>
<td>100000</td>
</tr>
<tr>
<td>10</td>
<td>ABC10</td>
<td>100000</td>
</tr>
<tr>
<td>11</td>
<td>ABC11</td>
<td>100000</td>
</tr>
<tr>
<td>12</td>
<td>ABC12</td>
<td>100000</td>
</tr>
<tr>
<td>13</td>
<td>ABC13</td>
<td>100000</td>
</tr>
<tr>
<td>14</td>
<td>ABC14</td>
<td>100000</td>
</tr>
</tbody>
</table>
</div>
javascript
$(document).ready(function() {
$('#printableAreaTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'print'
]
} );
} );
Js Files
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
cs files
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" />
Output
Had the same problem recently for a paginated grid with about 5000 rows. Since we do not have the full data rendered in the browser, calling print() will only show the current rows in the viewport.
What we end up doing is sending the model(data backing the grid) back to server, do the server side rendering(we use thymeleaf), then send back the full html string to browser. Now we could create a iframe on the fly and write the content to it and call print() on the iframe. Lastly, we remove the iframe from DOM. Client side code in the success callback looks like:
var printIFrame = document.createElement('iframe');
document.body.appendChild(printIFrame);
printIFrame.style.position = 'absolute';
printIFrame.style.top = -999;
printIFrame.style.left = -999;
var frameWindow = printIFrame.contentWindow || printIFrame.contentDocument || printIFrame;
var wdoc = frameWindow.document || frameWindow.contentDocument || frameWindow;
wdoc.write(res.data);
wdoc.close();
// Fix for IE : Allow it to render the iframe
frameWindow.focus();
try {
// Fix for IE11 - printng the whole page instead of the iframe content
if (!frameWindow.document.execCommand('print', false, null)) {
// document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891
frameWindow.print();
}
// focus body as it is losing focus in iPad and content not getting printed
document.body.focus();
}
catch (e) {
frameWindow.print();
}
frameWindow.close();
setTimeout(function() {
printIFrame.parentElement.removeChild(printIFrame);
}, 0);
For the server side part, you generate the html with whatever technology you have. If you happen to have similar stack as us(Java/Spring/Angular), look at my other POST. Hopefully this could help someone having similar problem with paginated data browser printing.
I'm trying to get the jquery datatable export buttons to display on an cshtml view in my MVC application.
The error is
0x800a01b6 - JavaScript runtime error: Object doesn't support property
or method 'i18n' Unhandled exception at line 13, column 363 in
http://localhost:52104/Scripts/buttons.html5.min.js which points to
the buttons.html5.min.js script text:function(a){return
a.i18n("buttons.excel","Excel")}
I created a proof of concept view just to see if the buttons would show up and work. The scripts are included in the BundleConfig.cs file
bundles.Add(new ScriptBundle("~/bundles/misc_scripts").Include(
"~/Scripts/autosize.js",
"~/Scripts/jquery.dataTables.min.js",
"~/Scripts/dataTables.bootstrap.js",
"~/Scripts/dataTables.responsive.min.js",
"~/Scripts/dataTables.buttons.min.js",
"~/Scripts/buttons.html5.min.js",
"~/Scripts/buttons.print.min.js",
"~/Scripts/jszip.min.js",
"~/Scripts/pdfmake.min.js",
"~/Scripts/vfs_fonts.js",
"~/Scripts/select2.min.js",
"~/Scripts/App/Shared.js"
<table id="example" class="display nowrap" 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>
<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>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable({
dom: 'Bfrtip',
buttons: ['excelHtml5']
});
});
</script>
Thanks for your help
i want to get the age of a particular name ,lets say i want to get the age of Garrett Winters , using jquery . the record can be at any row of the table.i have to search the whole table and get the corresponding age in a variable..
i want to search the column Name for a particular value and get the corresponding age
<table id="table1" border="1" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Status</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>CNF</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>CNF</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>CNF</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>TMP</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>CNF</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>TMP</td>
</tr>
</tbody>
</table>
i m new to jquery .Help me out
You can do something like this. It works for me. Demo
$(document).ready(function(){
var nameToSearch ="Tiger Nixon";
$('table tr').each(function(){
if($(this).find('td').eq(0).text() == nameToSearch)
alert("Age of "+nameToSearch+" is "+$(this).find('td').eq(3).text());
});
});
I hope it helps you.
Use :contains Psudeo selector in jquery. Get the age of the 'Garrett Winters'
var serachName = 'Garrett Winters';
$("table tbody tr td:contains("+serachName+")").parent().find('td:eq(3)').text()
Fiddle