Struggling to create a checkbox (with a multi-value key)
Struggling to create a checkbox (with a multi-value key)
Link to test case:
live.datatables.net/xekomuyi/1/edit
Description of problem:
I have the following defined for my dataTable
$('#example').DataTable( {
processing: true,
serverSide: true,
ajax: "/scripts/ssp6.php",
aoColumns: [
{ 'sName': 'owner' },
{ 'sName': 'ip_address', 'aDataSort': [1,3,2], 'aTargets': [1] },
{ 'sName': 'hostname' },
{ 'sName': 'port', 'aType': 'num', 'aTargets': [3] },
{ 'sName': 'service' },
{ 'sName': 'banner' },
{ 'sName': 'first_seen', 'aType': 'date', 'aTargets': [6] },
{ 'sName': 'last_seen' , 'aType': 'date', 'aTargets': [7] },
{ 'sName': 'notes' },
{ 'sName': 'tunnel', 'bVisible': false, 'aTargets': [9] }
],
fixedHeader: true,
colReorder: {
fixedColumnsLeft: 1
},
lengthMenu: [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]],
} );
My HTML table looks like
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Owner</th>
<th>IP</th>
<th>Hostname</th>
<th>Port</th>
<th>Service</th>
<th>Banner</th>
<th>First Seen</th>
<th>Last Seen</th>
<th>Notes</th>
<th>SSL</th>
</tr>
</thead>
</table>
My server-side columns look like
$columns = array(
array( 'db' => 'jt2.owner', 'dt' => 0, 'as' => 'owner'),
array( 'db' => 'mt.ip_address', 'dt' => 1, 'as' => 'ip_address'),
array( 'db' => 'jt1.hostname', 'dt' => 2, 'as' => 'hostname' ),
array( 'db' => 'mt.port', 'dt' => 3, 'as' => 'port' ),
array( 'db' => 'mt.service', 'dt' => 4, 'as' => 'service' ),
array( 'db' => 'mt.banner', 'dt' => 5, 'as' => 'banner' ),
array( 'db' => 'mt.first_seen', 'dt' => 6, 'as' => 'first_seen' ),
array( 'db' => 'mt.last_seen', 'dt' => 7, 'as' => 'last_seen' ),
array( 'db' => 'mt.notes', 'dt' => 8, 'as' => 'notes' ),
array( 'db' => 'mt.tunnel', 'dt' => 9, 'as' => 'tunnel' )
);
I need to add a new first column that is a checkbox, but this checkbox must contain an associated value that is composed ot many values from the returned query. For example, the current client-side code would look similar to the following (edited for this post)
$rowid = $ip_address . ":" . $port . ":" . $hostname . ":" . $tunnel . ":" . $owner;
<td><input type=\"checkbox\" name=\"selected[]\" value=\"".$rowid."\"/></td>
As a test I made the following changes:
HTML
**<th>Select</th>**
<th>Owner</th>
<th>IP</th>
DataTable
aoColumnDefs: [ {
aTargets': [0],
mData': function(source, type, val) {
source.select_row = "";
return;
}
} ],
Server-side call
$columns = array(
array( 'db' => 'jt2.owner', 'dt' => **1** 'as' => 'owner'),
...
array( 'db' => 'mt.tunnel', 'dt' => **10** 'as' => 'tunnel' )
);
Doing this does not create a checkbox, but does give me the error message:
DataTables warning: table id=example - Requested unknown parameter {function} for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
Answers
Use
columns.render
to display the checkbox and to have access to the full row of data.If possible, I suggest you use objects instead of arrays for your row data. It is much easier to use in Javascript. You will use
columns.data
to define the columns.See this example to give you na idea:
http://live.datatables.net/sipavula/91/edit
Kevin