[英]make datatable row a hyperlink in codeigniter
我正在用Codeigniter開發一個Web應用程序。 為了顯示表格,我正在使用DataTable API。 我的任務是向該行添加一個鏈接,以便當用戶單擊任何行時,它會指向另一個頁面。 我如何完成這項任務。 我發現使用fnRowCallback
。 但是我不明白如何使用它。 這是我的代碼:
視圖
<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>';
}
?>
控制者
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();
}
誰能幫我做到這一點..
$(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' );
} );
} );
您可以為該功能使用以下代碼,單擊特定行時將記錄data [0]
您可以使用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
});
請參閱: https : //datatables.net/reference/option/columnDefs和https://datatables.net/reference/option/columns.render
這個簡單的代碼對您有用嗎? 只需將源代碼復制粘貼到新的空白html文件中,然后運行即可:)
<!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:看一下onclick事件
參考: 鏈接整個表行?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.