javascript - How to create hyperlink or clickable cell inside a Bootstrap DataTable? - Stack Overflow

admin管理员组

文章数量:1328016

I have a sample json file with data:

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

This populates a table successfully. What I want is to have the firstName column (title) to be a clickable cell, or link. It can redirect to a page /page/(id). I'd like this particular cell to LOOK different from the rest of the data -- like a link or clickable cell.

Thanks.

I have a sample json file with data:

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

This populates a table successfully. What I want is to have the firstName column (title) to be a clickable cell, or link. It can redirect to a page /page/(id). I'd like this particular cell to LOOK different from the rest of the data -- like a link or clickable cell.

Thanks.

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow asked Aug 24, 2015 at 19:56 skylitskylit 5311 gold badge22 silver badges99 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I figured out how to do it by the following code:

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

Take a look at this: http://www.datatables/examples/advanced_init/column_render.html The 'data-table' way to acplish what you're looking for is to use a column renderer.

$('#example').DataTable( {
        "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return "<a href='whatever/" + row[0]+"'>"+row[1]+"</a>";
                },
                "targets": 1
            },
            { "visible": false,  "targets": [ 0 ] }
        ]
    } );

You can give that particular id a specific identifier so like this

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

And then have an onclick event for that class in jquery that will append the ID to the end of the URL and redirect the user.

$(".clickablename").click(function(){
  var ID = $(this).siblings(":first").text();
  window.location.href = "http://stackoverflow./page/"+ID;
});

JQuery with example of getting the ID from the first cell:

https://jsfiddle/jw58v30n/

EDIT: Please, note this is untested pseudocode.

Not sure if this is what you are looking for

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

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

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

Fiddle

本文标签： javascriptHow to create hyperlink or clickable cell inside a Bootstrap DataTableStack Overflow