Question

我有一个带有数据的示例json文件：

"data" : [ 
    {
        "id": 1,
        "firstName": "Fred",
        "lastName": "Flintstone",
        "userName": "fredf"
    }, {
        "id": 3,
        "firstName": "Barney",
        "lastName": "Ruble",
        "userName": "barneyr"
    }, {
        "id": 2,
        "firstName": "Wilma",
        "lastName": "Flintstone",
        "userName": "wilmaf"
    }, {
        "id": 4,
        "firstName": "Barney",
        "lastName": "Ruble",
        "userName": "bettyr"
    },.....

HTML：

<div class="panel-body">
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover" id="user-table">
    <thead>
            <tr data-href="/runbook">
                                                        <th>#</th>
                                                        <th>Title</th>
                                                        <th>Author</th>
                                                        <th>Date Created</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                        <!-- /.table-responsive -->
                                    </div>
                                    <!-- /.panel-body -->

JavaScript的：

$(document).ready(function() {
    $('#user-table').dataTable({
        <!-- Retrieve a static json file, you could also have a URL to a controller method. -->
        "sAjaxSource" : "/resources/sample.json",
        <!-- Indicate to dataTable what the field names are we want, in the order we want them in the table. -->
        "aoColumns": [
                  {"data":"id"},
                  {"data": "firstName"},
                  {"data":"lastName"},
                  {"data":"userName"}
        ]
    });
});

这会成功填充表格。我想要的是将firstName列（标题）作为可单击的单元格或链接。它可以重定向到页面/page/(id)。我希望这个特定的单元格看起来与其他数据不同 - 比如一个链接或可点击的单元格。

感谢。

Answer 1

我通过以下代码想出了如何做到这一点：

{"data": "title",
"render": function ( data, type, row, meta ) {
return "<a href='url?=" + runbookID + "'>" + data + '</a>';}
},

Answer 2

看看这个：http://www.datatables.net/examples/advanced_init/column_render.html 数据表＆＃39;实现您正在寻找的内容的方法是使用列渲染器。

<?php
            $boton=@$_POST['btnParticipar'];
            if (isset($boton)) {
                $nombre=@$_POST['txtNumero'];
                $simbolos=array('<','>','@','?','php','*','[a-zA-Z]');
                foreach ($simbolos as $sim) {
                    $nombre=str_replace($sim,' ',$nombre);
                }
                echo $nombre;
            }
        ?>

Answer 3

您可以为该特定ID指定一个特定的标识符，就像这样

for i, d in enumerate(data):
    if i > 0:
        if d[0] - data[i-1][1] > datetime.timedelta(0):
            print("Gap")

然后在jquery中为该类添加一个onclick事件，该事件将ID附加到URL的末尾并重定向用户。

<th id="44" class="clickablename"> </th>

JQuery，其中包含从第一个单元格中获取ID的示例：

https://jsfiddle.net/jw58v30n/

编辑：请注意，这是未经测试的伪代码。

Answer 4

不确定这是否是您要找的

$("tbody > tr").click(function(){

 var bookId = $(this).children().first().text();
    var href = $(this).attr('data-href')+'/'+bookId;

    console.log(href);
    alert(href);
});

Fiddle

如何在Bootstrap DataTable中创建超链接或可单击的单元格？

4 个答案: