Formatting JQuery DataTables Data

Question

I have a JQuery DataTable that I am populating with data from MySQL. The DataTable displays as expected, but I need a few changes made. How can I ONLY set the 'Attempts' And 'Completes' to a hyperlink if the value is <> 0. And also, how can I capture the 'SalesRep' name from the selected column? (I'm going to pass that to the opening page to show specific data for that 'SalesRep'.

This is the code that I have.

<body>
    <div class="container">
        <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Manager</th>
                    <th>SalesRep</th>
                    <th># Doors Knocked</th>
                    <th># Sales Made</th>
                </tr>
            </thead>
        </table>
    </div>
</body>

<script type="text/javascript">
var information = <?php echo json_encode($salesinfo) ?>;
    $(document).ready(function () {
        $('#example').salesinfoTable({
            salesinfo: information,
            columns: [
                { salesinfo: 'Manager' },
                { salesinfo: 'SalesRep' },
                { 
                   salesinfo: 'Attempts' ,
                   render: function(salesinfo, type, row, meta) {
                       if(type == 'display') {
                           salesinfo = '<a href="' + salesinfo + '">' + salesinfo + '</a>';
                       }
                       return salesinfo;
                   }
                },
                { 
                    salesinfo: 'Completes',
                    render: function(salesinfo, type, row, meta) {
                       if(type == 'display') {
                           salesinfo = '<a href="' + salesinfo + '">' + salesinfo + '</a>';
                       }
                       return salesinfo;
                   }     
                }
            ]
        });
    });
</script>

EDIT
I tried to use your updated code of

if(data != 0)

But when I do that I get an error in the console of:

Uncaught Error: DataTables warning: table id=example - Requested unknown parameter 'Attempts' for row 0, column 2. For more information about this error, please see http://datatables.net/tn/4
    at K (jquery.dataTables.min.js?ver=2.3.4:74)
    at B (jquery.dataTables.min.js?ver=2.3.4:17)
    at Ha (jquery.dataTables.min.js?ver=2.3.4:25)
    at O (jquery.dataTables.min.js?ver=2.3.4:16)
    at e (jquery.dataTables.min.js?ver=2.3.4:92)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js?ver=2.3.4:93)
    at Function.each (jquery-3.3.1.min.js:2)
    at w.fn.init.each (jquery-3.3.1.min.js:2)
    at w.fn.init.n [as dataTable] (jquery.dataTables.min.js?ver=2.3.4:83)
    at HTMLDocument.<anonymous> ((index):251)

This is an example of my data that I am using, the last two values are the ones that I am wanting to ONLY hyperlink if they are >= 1

var data = [
    { "Manager": "M1", "SalesRep": "Rep1", "Attempts": "0", "Completes": "1" }
];

mike85 · Accepted Answer · 2019-08-01 15:04:54Z

1

UPDATED: Fixed some code and added snippet sample

UPDATED: changed validation inside example code

How can I ONLY set the 'Attempts' And 'Completes' to a hyperlink if the value is <> 0

Well you can use basic validation like this:

{ 
  data: 'Attempts' ,
  render: function(data, type, row, meta) {
           if(data != 0)
           {
             if(type == 'display') {
              return '<a href="#'+data+'">'+data+'</a>';
             }
           }
           return data;
          }        
}

How can I capture the 'SalesRep' name from the selected column?

The third parameter passed into the function is the data object for the whole row, while the first parameter is controlled by columns.data:

   { 
      data: 'Attempts',
      render: function(data, type, row, meta) {
               if(data)
               {
                 if(type == 'display') {
                  return '<a href="' + row.Attempts + '">' + row.Attempts + '</a> <a href="' + row.SalesRep + '">' + row.SalesRep + '</a>';
                 }
               }
               return data;
              }
    }

You can refer to below documentations:

https://datatables.net/manual/data/renderers

https://datatables.net/reference/option/columns.render

var information = [
    { "Manager": "M1", "SalesRep": "Rep1", "Attempts": "1", "Completes": "91" },
     { "Manager": "M2", "SalesRep": "Rep1", "Attempts": "0", "Completes": "21" },
      { "Manager": "M3", "SalesRep": "Rep1", "Attempts": "0", "Completes": "31" },
       { "Manager": "M4", "SalesRep": "Rep1", "Attempts": "1", "Completes": "0" }
];

$(document).ready(function () {
    table = $('#example').DataTable({
        data: information,
        columns: [
            { data: 'Manager'},
            { data: 'SalesRep'},
            { 
              data: 'Attempts',
              render: function(data, type, row, meta) {
                        if(type=='display'){
                          if(data > 0){
                            return '<a href="#'+data+'">'+data+'</a>';
                          }
                        }
                        return data;
                      }         
            },
            { 
              data: 'Completes',
              render: function(data, type, row, meta) {
                        if(type=='display'){
                          if(data > 0){
                            return '<a href="#'+data+'">'+data+'</a>';
                          }
                        }
                        return data;
                      }         
            },
        ]
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Manager</th>
            <th>SalesRep</th>
            <th># Doors Knocked</th>
            <th># Sales Made</th>
        </tr>
    </thead>
</table>

edited Aug 1, 2019 at 15:04

answered Aug 1, 2019 at 5:01

mike85

6314 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

HotTomales Over a year ago

Thank you for the answer. This syntax is still setting a 0 value to be a hyperlink

jquery data: 'Attempts', render: function(data, type, row, meta) { 	if(data) { 		if(type == 'display') { 			data = '<a href="' + data + '">' + data + '</a>'; 		} 		return data; 	} }

mike85 Over a year ago

@HotTomales updated my code. If not working maybe you can show some part of data and i will prepare example demo to you.

HotTomales Over a year ago

I updated my OP. Thank you again for the assistance.

HotTomales Over a year ago

And just in case it matters, on the database side of things, both fields are int(11)

mike85 Over a year ago

@HotTomales the error causes when can't get return columns.data. Updated my code with fixes and added sample snippet to you to run

Collectives™ on Stack Overflow

Formatting JQuery DataTables Data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related