使数据表行成为代码点火器中的超链接


make datatable row a hyperlink in codeigniter

我正在用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:看看点击事件
参考资料 : 链接整个表格行?