Php 使datatable行成为codeigniter中的超链接_Php_Codeigniter_Datatables

Php 使datatable行成为codeigniter中的超链接

php codeigniter datatables

Php 使datatable行成为codeigniter中的超链接,php,codeigniter,datatables,Php,Codeigniter,Datatables,我正在用codeigniter开发一个web应用程序。为了显示表，我使用了DataTableAPI。我的任务是向该行添加一个链接，这样当用户单击任何一行时，它就会指向另一个页面。我怎样才能完成这项任务。我发现使用fnRowCallback。但是我不知道怎么用这个。这是我的密码：看法 $（文档）.ready（函数（）{ var oTable=$（'#SupData'）。数据表({ “aaSorting”：[[1，“asc”]， “阿伦提努”：[[10,25,50,100，-1]，[10,25,

我正在用codeigniter开发一个web应用程序。为了显示表，我使用了DataTableAPI。我的任务是向该行添加一个链接，这样当用户单击任何一行时，它就会指向另一个页面。我怎样才能完成这项任务。我发现使用

fnRowCallback

。但是我不知道怎么用这个。这是我的密码：

看法


$（文档）.ready（函数（）{
var oTable=$（'#SupData'）。数据表({
“aaSorting”：[[1，“asc”]，
“阿伦提努”：[[10,25,50,100，-1]，[10,25,50,100，”]，
“iDisplayLength”：，
'bProcessing'：true，'bServerSide'：true，
“sAjaxSource”：“，
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
aoData.push({
“名称”：“，
“值”：”
});
$.ajax（{'dataType'：'json'，'type'：'POST'，'url'：sSource，'data'：aoData，'success'：fnCallback}）；
},
“fnRowCallback”：函数（nRow、aData、iDisplayIndex）{//不确定是否使用此函数
var oSettings=oTable.fnSettings（）；
nRow.id=aData[0]；
返回nRow；
},
“aoColumns”：[{
“可移植”：错误，
“mRender”：复选框
}，null，null，null，null，null，null，null，null，{“bSortable”：false}]
}).dtFilter([
{column_number:1，filter_default_标签：[]，filter_类型：“text”，数据：[]}，
{列编号：2，过滤器默认标签：[]，过滤器类型：“文本”，数据：[]}，
{列编号：3，过滤器默认标签：[]，过滤器类型：“文本”，数据：[]}，
{列编号：4，过滤器默认标签：[]，过滤器类型：“文本”，数据：[]}，
{列编号：5，过滤器默认标签：[]，过滤器类型：“文本”，数据：[]}，
{列编号：6，过滤器默认标签：[]，过滤器类型：“文本”，数据：[]}，
{列编号：7，过滤器默认标签：[]，过滤器类型：“文本”，数据：[]}，
]“页脚”）；
});
您可以为该函数使用以下代码，当您单击特定行时，您将记录数据[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
});

var d=[{
“目标”：-1，“数据”：0，
“渲染”：函数（数据、类型、行）{
返回“”；
}
}];
var dt=$（'#示例2'）。数据表({
“处理”：对，
“服务器端”：正确，
“ajax”：url，
“columnDefs”：d
});

请参阅：这个简单的代码对您有用吗？只需将此源代码复制粘贴到新的空白html文件中，然后运行它：）

身份证件
名称
1.
杰克
2.
爱丽丝
（功能（）{
$（“#SupData”）.dataTable({
“bPaginate”：对，
“sPaginationType”：“完整编号”，
“bRetrieve”：没错，
“bDestroy”：正确
});
})();

PS：查看onclick事件

参考资料：您想在电子邮件地址字段上链接，它应该是打开新选项卡的，对吗？实际上，当用户单击行的任何列时，他们应该会进入另一个页面，传递该记录的id。当我按您所说的使用时，表不会加载任何数据。
    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' );
    } );
} );

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
});

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