John Davidson

php - How can I add <a> tag in the column of datatable?

0 comments
Message:


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

5 of 5 based on 6869 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us