9

I am using DataTables to generate a table. There is a column containing order numbers.

For example: ...

I need every row in this column to have a hyperlink to view/order?id=? where ? is the contents of row in the Order No column. For example the first row would be a hyperlink to view/order?id=1321755 etc.

What is the simplest way I can do so?

enter image description here

Here is the code that I am using to initialize the DataTables:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#example').dataTable( {
            "serverSide": true,
            "ajax": {
                    "url": "../server_processing/orders.php",
                    "type": "POST"
                    },
            "order": [[ 0, "desc" ]]
        } );
    } );
</script>

  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Order No</th>
        ...
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
0

2 Answers 2

17

Check this out: http://datatables.net/reference/option/columns.render

You can add a column render callback when you specify columns definition.

var columnsDef = [
...
{
    "title": "Order No.",
    "render": function (data, type, row, meta) {
        return '<a href="view/order?' + data + '">' + data + '</a>';
    }
},
...
];

$("#table").dataTable({
    ...
    "columns": columnsDef,
    ...
});

The data in that column will be changed to what the render function return.

2
  • Hi, do you know solution how to fix +data+ that will always be connected to first column? I have multiple columns and column 1-2 are linkable. First has ID and 2nd has NAME. I want that if person clicks NAME it uses ID number for a link instead. Hope it makes sense
    – Trm
    Commented Dec 24, 2016 at 13:42
  • In that case, you need to explore what row variable provide. I guess it contains every column in that specific row.
    – Moozz
    Commented Dec 25, 2016 at 14:41
3

I needed to use jQuery dataTables and turn a normal field to be a HREF field.

Here you have it all, including also dataTables error handling..

Enjoy..

Yosi Lev

1) The HTML part:
<!-- COMPANIES LIST start -->
<div id="compListDiv" style="visibility:hidden; position : absolute; left : 360px; top : 40px;">
   <br>
   <table id="compList"  align="left" border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>address</th>
                </tr>
            </thead>
   </table>
</div>
<!-- COMPANIES LIST end -->

2) The javascript dataTables part:
When a button is clicked the following js function is called:
function companiesList(){
        accountstable=$('#compList').dataTable({
            sort : true,
            bFilter: false, 
            bInfo: false,
            paging:false,
            autoWidth: true,
            ajax: {
                url: "http://localhost:8080/j112/rest-1/companies/list",
                dataType: 'json',
                dataSrc: "data",
                error: function ( xhr, textStatus, error ) {
                    if ( textStatus === 'timeout' ) {
                        alert( 'Timout error. The server took too long to send back the data.\nPlease try again.' );
                    }
                    else {
                        alert( 'User Not In Session.' );
                        location.href = "login.html";
                    }
                    myDataTable.fnProcessingIndicator( false );
                }//function
            }/* ajax: */,
            scrollCollapse: true,

            bDestroy: true,
            serverSide:true,
            fnRowCallback : function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) { // this function is called for each row, but I could not use it to add the link
                 // if ( aData[1] == "A" )
                  //var td0 = $('td:eq(0)', nRow)[0];
                  // $('td:eq(0)', nRow).html( 'A');
                  // $('td:eq(0)', nRow).html( '<b>A</b>' )             
            },// fnRowCallback
            initComplete : function(settings, json) { // this function is called after table is populated
                //$("#compListDiv").show();  // this did not work so I used regular js to show the DIV
                var d1 = document.getElementById('compListDiv');
                d1.style.visibility = 'visible';
              }, //initComplete
            "columnDefs": [  
                         { "width": "10%", "targets": 0 },
                         { "width": "20%", "targets": 0 },
                         { "width": "70%", "targets": 0 }
                       ],

            "columns":[
                       //{"data" : "id"},
                       { // render
                        "data": function (data, type, row, meta) {
                                          return '<a href="view/order?' + data.id + '">' + data.id + '</a>';
                                  }
                       },
                       {"data" : "name"},
                       {"data" : "address"}
                      ]
        }); // dataTable()
 }// companiesList()

By Yosi Lev - Feb 22, 2016

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.