CODEWITHSUNDEEP
jquerydatatables
HotTomales
HotTomales

Reputation: 564

Formatting JQuery DataTables Data

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

Upvotes: 1

Views: 166

Answers (1)

mike85
mike85

Reputation: 631

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>

Upvotes: 1

Related Questions