I am making a table of product with their respective subgroup with datatable.
I am trying to make the "group" to be like a link. When user click it, it will redirect to a page of the product group and all the product under the group.
this is my code.
var prod_table = $('#product_table').DataTable({
"bProcessing": true,
"serverSide": true,
"pagingType": "first_last_numbers",
responsive: true,
stateSave: true,
"lengthMenu": [
[10, 25, 50, 100],
[10, 25, 50, 100]
],
language: {
search: "_INPUT_",
searchPlaceholder: "Search product here..",
},
"order": [
[0, "desc"]
],
"ajax": {
url: "php/get_product.php",
type: "post"
}
});
<table class="table table-striped" id="product_table" cellspacing="0" width="100%">
<thead>
<tr>
<th><b>Product Code</b></th>
<th><b>Product Name</b></th>
<th><b>Manufacturer</b></th>
<th><b>Group</b></th>
<th><b>Price</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My current table
| Product Code | Product Name | Manufacturer | Group | Price |
|---|---|---|---|---|
| ABC123 | teser 1 | test inc | Hardware | $45.00 |
| DEF456 | tester 2 | test2 pte ltd | Software | $120.00 |
My Answer:
To add a link to the "Group" column in your datatable, you can use the `render` option in the column definition. Here's how you can modify your code to add a link to the "Group" column:
javascript
var prod_table = $('#product_table').DataTable({
"bProcessing": true,
"serverSide": true,
"pagingType": "first_last_numbers",
responsive: true,
stateSave: true,
"lengthMenu": [
[10, 25, 50, 100],
[10, 25, 50, 100]
],
language: {
search: "_INPUT_",
searchPlaceholder: "Search product here..",
},
"order": [
[0, "desc"]
],
"ajax": {
url: "php/get_product.php",
type: "post"
},
"columns": [
null,
null,
null,
{
"render": function(data, type, row) {
return '' + row[3] + '';
}
},
null
]
});
In the above code, I added a `columns` option to specify the rendering for each column. For the "Group" column, I used the `render` function to create a link with the group name as the text and a URL parameter for the group. When the user clicks on the group name, they will be redirected to the `product_group.php` page with the group parameter in the URL.
Make sure to replace `product_group.php` with the actual URL of your product group page.
Rate this post
4 of 5 based on 6581 votesComments