selected: true not working in Buttons when selecting using column()
selected: true not working in Buttons when selecting using column()
oakhamwolf
Posts: 11Questions: 4Answers: 1
Dear all,
I have been trying to move from TableTools to the Button and Select Extensions but i have encountered a problem with selecting columns and I could do with some help.
Firstly I have included the Buttons and Select extensions in the <head> tag. Then in the code below I have created a button to simply extract the data from the first column and present it in an alert as a comma separated string. I am applying various selector modifiers to account for if people have searched or changed the order of the table and also added a modifier to capture only those rows (if any) that are selected. This latter option is the problem as every time I click the button I get an error in my console that dt.column(...).data(...) is undefined. If I remove the selected: true modifier, then all works as expected.
Can anyone spot what i am doing wrong?
<!DOCTYPE html>
<head>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="/js/DataTables-1.10.9/media/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/DataTables-1.10.9/media/css/jquery.dataTables.css">
<script type="text/javascript" src="/js/DataTables-1.10.9/extensions/Select/js/dataTables.select.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/DataTables-1.10.9/extensions/Select/css/select.dataTables.min.css">
<script type="text/javascript" src="/js/DataTables-1.10.9/extensions/Buttons/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/DataTables-1.10.9/extensions/Buttons/css/buttons.dataTables.min.css">
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
select: true,
dom: 'Bfrltip',
buttons: [
{
text: "View Records",
action: function( e, dt, node, config ) {
var sData = dt.column(0 , { order: 'current', search: 'applied', selected: true } ).data().join();
alert(sData);
}
}
]
});
});
</script>
</head>
<body>
<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>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
</tbody>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
Answers
Bump!
Can you link to a test page showing the issue, per the forum rules, so we can debug it and offer some help please.
Allan
Thank you Allan. I have created a JSFiddle page to demonstrate the issue:
https://jsfiddle.net/yzjscozw/
Note that I have used the Download Builder to create the JS and CSS external resources.
Any help will be greatfully received.
Thanks for the link. In Chrome I get:
Which is correct - the result from
dt.column(0 , { order: 'current', search: 'applied', selected: true } ).data()is undefined. The reason for that is that there are no column selected - when usingcolumn()theselected:truerefers to the selected columns.To get the data from column 0 for the selected rows, you can use:
Updated fiddle: https://jsfiddle.net/yzjscozw/1/
Allan
Thank you Allan.
I note that this method will specifically only return selected rows but if none are selected then nothing is returned. I think this is different behaviour to how TableTools worked, where if nothing was selected, everything was returned. This confused me a bit but is more intuitive how it is now and I can always have some kind of if/else checking if a selection has been made first and if not return the lot!
This is a fantastic tool so thank you again.
Cheers
That is correct - and I agree - I think this is now more intuitive in the API.
Allan