make datatable row a hyperlink in codeigniter
Question
I am developing a web application in codeigniter. For showing table I am using DataTable API. My task is to add a link to the row so that when the user clicks on any row, it leads to another page. How can I accomplish this task. I found using fnRowCallback . But I didnt understand how to use this. Here is my code:
View
<script>
$(document).ready(function () {
var oTable = $('#SupData').dataTable({
"aaSorting": [[1, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "<?= lang('all') ?>"]],
"iDisplayLength": <?= $Settings->rows_per_page ?>,
'bProcessing': true, 'bServerSide': true,
'sAjaxSource': '<?= site_url('suppliers/getSuppliers') ?>',
'fnServerData': function (sSource, aoData, fnCallback) {
aoData.push({
"name": "<?= $this->security->get_csrf_token_name() ?>",
"value": "<?= $this->security->get_csrf_hash() ?>"
});
$.ajax({'dataType': 'json', 'type': 'POST', 'url': sSource, 'data': aoData, 'success': fnCallback});
},
'fnRowCallback': function (nRow, aData, iDisplayIndex) { //not sure about using this
var oSettings = oTable.fnSettings();
nRow.id = aData[0];
return nRow;
},
"aoColumns": [{
"bSortable": false,
"mRender": checkbox
}, null, null, null, null, null, null, null, {"bSortable": false}]
}).dtFilter([
{column_number: 1, filter_default_label: "[<?=lang('company');?>]", filter_type: "text", data: []},
{column_number: 2, filter_default_label: "[<?=lang('name');?>]", filter_type: "text", data: []},
{column_number: 3, filter_default_label: "[<?=lang('email_address');?>]", filter_type: "text", data: []},
{column_number: 4, filter_default_label: "[<?=lang('phone');?>]", filter_type: "text", data: []},
{column_number: 5, filter_default_label: "[<?=lang('city');?>]", filter_type: "text", data: []},
{column_number: 6, filter_default_label: "[<?=lang('country');?>]", filter_type: "text", data: []},
{column_number: 7, filter_default_label: "[<?=lang('vat_no');?>]", filter_type: "text", data: []},
], "footer");
});
</script>
<?php if ($Owner) {
echo form_open('suppliers/supplier_actions', 'id="action-form"');
} ?>
<div class="box">
<div class="box-header">
<h2 class="blue"><i class="fa-fw fa fa-users"></i><?= lang('suppliers'); ?></h2>
<div class="box-icon">
<ul class="btn-tasks">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="icon fa fa-tasks tip"
data-placement="left"
title="<?= lang("actions") ?>"></i></a>
<ul class="dropdown-menu pull-right" class="tasks-menus" role="menu" aria-labelledby="dLabel">
<li><a href="<?= site_url('suppliers/add'); ?>" data-toggle="modal" data-target="#myModal"
id="add"><i class="fa fa-plus-circle"></i> <?= lang("add_supplier"); ?></a></li>
<li><a href="<?= site_url('suppliers/import_csv'); ?>" data-toggle="modal"
data-target="#myModal"><i class="fa fa-plus-circle"></i> <?= lang("import_by_csv"); ?>
</a></li>
<li><a href="#" id="excel" data-action="export_excel"><i
class="fa fa-file-excel-o"></i> <?= lang('export_to_excel') ?></a></li>
<li><a href="#" id="pdf" data-action="export_pdf"><i
class="fa fa-file-pdf-o"></i> <?= lang('export_to_pdf') ?></a></li>
<li class="divider"></li>
<li><a href="#" class="bpo" title="<b><?= $this->lang->line("delete_suppliers") ?></b>"
data-content="<p><?= lang('r_u_sure') ?></p><button type='button' class='btn btn-danger' id='delete' data-action='delete'><?= lang('i_m_sure') ?></a> <button class='btn bpo-close'><?= lang('no') ?></button>"
data-html="true" data-placement="left"><i
class="fa fa-trash-o"></i> <?= lang('delete_suppliers') ?></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="box-content">
<div class="row">
<div class="col-lg-12">
<p class="introtext"><?= lang('list_results'); ?></p>
<div class="table-responsive">
<table id="SupData" cellpadding="0" cellspacing="0" border="0"
class="table table-bordered table-condensed table-hover table-striped">
<thead>
<tr class="primary">
<th style="min-width:30px; width: 30px; text-align: center;">
<input class="checkbox checkth" type="checkbox" name="check"/>
</th>
<th><?= lang("company"); ?></th>
<th><?= lang("name"); ?></th>
<th><?= lang("email_address"); ?></th>
<th><?= lang("phone"); ?></th>
<th><?= lang("city"); ?></th>
<th><?= lang("country"); ?></th>
<th><?= lang("vat_no"); ?></th>
<th style="width:85px; text-align:center;"><?= lang("actions"); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="9" class="dataTables_empty"><?= lang('loading_data_from_server') ?></td>
</tr>
</tbody>
<tfoot class="dtFilter">
<tr class="active">
<th style="min-width:30px; width: 30px; text-align: center;">
<input class="checkbox checkft" type="checkbox" name="check"/>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="width:85px;"><?= lang("actions"); ?></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<?php if ($Owner) { ?>
<div style="display: none;">
<input type="hidden" name="form_action" value="" id="form_action"/>
<?= form_submit('performAction', 'performAction', 'id="action-form-submit"') ?>
</div>
<?= form_close() ?>
<?php } ?>
<?php if ($action && $action == 'add') {
echo '<script>$(document).ready(function(){$("#add").trigger("click");});</script>';
}
?>
Controller
function getSuppliers()
{
$this->sma->checkPermissions('index');
$this->load->library('datatables');
$this->datatables
->select("id, company, name, email, phone, city, country, vat_no")
->from("companies")
->where('group_name', 'supplier')
->add_column("Actions", "<center><a class=\"tip\" title='" . $this->lang->line("edit_supplier") . "' href='" . site_url('suppliers/edit/$1') . "' data-toggle='modal' data-target='#myModal'><i class=\"fa fa-edit\"></i></a> <a class=\"tip\" title='" . $this->lang->line("list_users") . "' href='" . site_url('suppliers/users/$1') . "' data-toggle='modal' data-target='#myModal'><i class=\"fa fa-users\"></i></a> <a class=\"tip\" title='" . $this->lang->line("add_user") . "' href='" . site_url('suppliers/add_user/$1') . "' data-toggle='modal' data-target='#myModal'><i class=\"fa fa-plus-circle\"></i></a> <a href='#' class='tip po' title='<b>" . $this->lang->line("delete_supplier") . "</b>' data-content=\"<p>" . lang('r_u_sure') . "</p><a class='btn btn-danger po-delete' href='" . site_url('suppliers/delete/$1') . "'>" . lang('i_m_sure') . "</a> <button class='btn po-close'>" . lang('no') . "</button>\" rel='popover'><i class=\"fa fa-trash-o\"></i></a></center>", "id");
//->unset_column('id');
echo $this->datatables->generate();
}
Can anyone help me to do this..
3 answers
solution1
0 2016-02-01 05:53:12
$(document).ready(function()
{
var table = $('#SupData').DataTable();
$('#SupDatatbody').on('click', 'tr', function ()
{
var data = table.row( this ).data();
alert( 'You clicked on '+data[0]+'\'s row' );
} );
} );
You can use following code for that function, you will data[0] record when you click on specific row
solution2
0 2016-02-01 05:56:20
You can use columnDefs :
var d = [{
"targets": -1,"data": 0,
"render": function(data, type, row) {
return '<a class="btn btn-info" href="yourlink">Edit</a>';
}
}];
var dt = $('#example2').DataTable({
"processing": true,
"serverSide": true,
"ajax": url,
"columnDefs": d
});
Refer : https://datatables.net/reference/option/columnDefs and https://datatables.net/reference/option/columns.render
solution3
0 2016-02-01 05:58:21
Will this simple code work for you? Simply copy paste this source code to a new blank html file, and run it :)
<!DOCTYPE html>
<HTML>
<HEAD>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
</HEAD>
<BODY>
<table id="SupData">
<thead>
<th>ID</th>
<th>Name</th>
</thead>
<tbody>
<tr onclick="location.href='destination.html?parm1=1&parm2=Jack'">
<td>1</td>
<td>Jack</td>
</tr>
<tr onclick="location.href='destination.html?parm1=2&parm2=Alice'">
<td>2</td>
<td>Alice</td>
</tr>
</tbody>
</table>
<script>
(function() {
$("#SupData").dataTable({
"bPaginate": true,
"sPaginationType": "full_numbers",
"bRetrieve": true,
"bDestroy": true
});
})();
</script>
</BODY>
</HTML>
PS: Look at the onclick event
References : Link entire table row?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Make Each Row of DataTables a Hyperlink to ID
CodeIgniter - Hyperlink creation
How to give hyperlink to items in CodeIgniter
jQuery DataTable - Add new row works, but not able to make it editable (jeditable)
DataTable pagination not working with codeigniter
How to use datatable in Codeigniter
Codeigniter Datatable Union and Order by
action button on datatable codeigniter
How to make new row every 4 column in phpword and Codeigniter?
Make a custom hyperlink in php
Related Tags