0

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..

Aishwaryas
  • 633
  • 2
  • 18
  • 44

3 Answers3

0
$(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

Paresh Gami
  • 4,777
  • 5
  • 23
  • 41
0

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

Mr. Engineer
  • 3,522
  • 4
  • 17
  • 34
0

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?

Community
  • 1
  • 1
Budianto IP
  • 1,118
  • 1
  • 13
  • 27