hyperlink to website stored in 1 column

ajaym193 · January 2017

i have made a table of 10 columns in which 1 column displays website addresses. What i need is that when one clicks on those websites, it should be redirected to that website.Can you please help me on this

allan · January 2017

All you should need is to use a regular a tag. I'd need a link to the page to say exactly though since I don't know if you are using rendering functions, Ajax loading data, DOM loading, or what! .

Allan

ajaym193 · February 2017

I cannot give link as Its on localhost but my entire code is as follows:-

<!DOCTYPE html> 
<html>
<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">


$(document).ready(function() {
    $('#example').DataTable( {
    "ajax": "server-response.php",
    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
    "aProcessing": true,
    "aServerSide": true,
    "processing": true,
    "order": [[ 11, "desc" ]],

    initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.header()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );


$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );


$(document).ready(function() {
    // Setup - Select Multiple Rows
    var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
 
    $('#button').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
    } );
} );


$('#example')
    .on( 'processing.dt', function ( e, settings, processing ) {
        $('#processingIndicator').css( 'display', processing ? 'block' : 'none' );
    } )
    .dataTable();

</script>
</head>

<body class="dt-example">
<div style="background-color:navy; text-align:center;">
<a style="font-size:3vw;"><font color="darkorange">DE</font><font style="font-size:4vw;"color="white">Z</font><font color="lightgreen">IGNOPEDIA</font></a>
</div>


<table id="example" class="table table-striped table-bordered hover " cellspacing="0" width="100%">
<thead>
<tr>
<th>Type</th>
<th>Brand Name / Subject</th>
<th>Product Segment</th>
<th>Company</th>
<th>Contact Name</th>
<th>Email</th>
<th>Website</th>
<th>Mobile / Phone</th>
<th>City</th>
<th>Proposal Details / Keywords</th>
<th>Posted On</th>
<th>TX No.</th>
</tr>
</thead>

<thead>
<tr>
<th>Type</th>
<th>Brand Name / Subject</th>
<th>Product Segment</th>
<th>Company</th>
<th>Contact Name</th>
<th>Email</th>
<th>Website</th>
<th>Mobile / Phone</th>
<th>City</th>
<th>Proposal Details / Keywords</th>
<th>Posted On</th>
<th>TX No.</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Type</th>
<th>Brand Name / Subject</th>
<th>Product Segment</th>
<th>Company</th>
<th>Contact Name</th>
<th>Email</th>
<th>Website</th>
<th>Mobile / Phone</th>
<th>City</th>
<th>Proposal Details / Keywords</th>
<th>Posted On</th>
<th>TX No.</th>
</tr>
</tfoot>


</table>


</body>
</html>

allan · February 2017

I would suggest you use columns.render to define a renderer. There is an example in the documentation. Might also be worth reading over the renderers section of the documentation.

Allan

hyperlink to website stored in 1 column

hyperlink to website stored in 1 column

Answers

Howdy, Stranger!

Categories

DataTables

hyperlink to website stored in 1 column

hyperlink to website stored in 1 column

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables