我正在用codeigniter开发一个Web应用程序。为了显示表,我正在使用数据表 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:看看点击事件
参考资料 : 链接整个表格行?