DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Unable to link a column using datatables

Unable to link a column using datatables

mayankmanumayankmanu Posts: 7Questions: 3Answers: 0
edited September 2014 in Free community support 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Populating JSP</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />

</head>
<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>id</th>
                <th>salary</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

     <script>

        $(document).ready(function() {
                $('#example').dataTable( {
                    serverSide: true,
                    "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                        $('td:eq(2)', nRow).html('<a href="http://www.google.com' + aData[2] + '">' +
                            aData[2] + '</a>');
                        return nRow;
                    },
                    ajax : {
                        url: 'hello/data1',
                        dataType:'json',
                        type: 'POST'

                    }

                }

                 );
        });

    </script>

</body>
</html>

I have 2 coulmns, ID and Salary. I am linking the salary to google.com, for that I am using fnRowCallback function. But that doesn't seem to work. Where do you think I am going wrong. The jsp is shown above.

Answers

  • JamaurJamaur Posts: 87Questions: 10Answers: 0

    Take a look at columns.data

  • mayankmanumayankmanu Posts: 7Questions: 3Answers: 0
    edited September 2014

    @Jamaur: I couldn't relate it with my requirements. Can you tell how to catch columns in a row?

    I have just started learning programming.

  • JamaurJamaur Posts: 87Questions: 10Answers: 0 

    $('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": function ( row, type, val, meta ) {
      if (type === 'set') {
        row.salary= val;
        return;
      }
      else if (type === 'display') {
        return "<a href='google.co.uk'>" +row.salary+ "</a>";
      }
      return row.salary;
    }
  } ]
} );

    Targets refer to the column index

  • mayankmanumayankmanu Posts: 7Questions: 3Answers: 0
    edited September 2014 
      <script>
        $(document).ready(function() {
                $('#example').dataTable( {
                    serverSide: true,
                    "columnDefs":[{
                    "targets":1,
                    "data": function(row,type,val,meta){
                        if(type==='set'){
                            row.salary=val;
                        }
                        else if(type==='display'){
                    return "<a href='google.com'>"+row.salary+"</a>";   
                        }
                        }
                    }],
                    ajax : {
                        url: 'hello/data1',
                        dataType:'json',
                        type: 'POST'
                    }
                }
                 );
        });
       </script>

    I am getting undefined in my second column and also it is appending google.com to my url.

    Also,
    what is type==='set' and 'display'?

  • JamaurJamaur Posts: 87Questions: 10Answers: 0

    Are you sure salary (row.salary) is the name of the column? What second column?

    The different types of data requested for the cell:

    Set: The value to be used internally or something of the sort
    Display: The value to be used for display purposes, in your case encase the value in a link
    Filter: The value to be used for Filter purposes
    Sort: The value to be used for Sort purposes

  • mayankmanumayankmanu Posts: 7Questions: 3Answers: 0 
    <script>

        $(document).ready(function() {
                $('#example').dataTable( {
                    serverSide: true,
                    "columnDefs":[{
                    "targets":1,
                    "data": function(row,type,val,meta){
                        if(type==='set'){
                            row.salary=val;
                        }
                        else if(type==='display'){
                    return "<a href='google.com'>"+salary+"</a>";   
                        }
                        }
                    }],
                    ajax : {
                        url: 'hello/data1',
                        dataType:'json',
                        type: 'POST'

                    }

                }

                 );
        });

    </script>

    I am sure the name of my second column is salary with small s. Now when I change this, my table is not getting populated. I am really stupid I guess.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.