Skip to content

How to use Datatables column data (done in js) in action button url’s last segment?

How to use Datatables column data (done in js) in action button url’s last segment

I have a column data that gives the output of from a database table. I want to one of the columns data at the last segment of the url. My provided attachment photo shows the details. If anyone could help

data: ‘file_id’ to be used in url

    <script type="text/javascript">
    $(document).ready(function(){
        
        $('#empTable').DataTable({
            'processing': true,
            'serverSide': true,
            'serverMethod': 'post',
            'ajax': {
              'url':'<?=base_url()?>admin/Employee/empList'
            
            },
             dom: 'Bfrtip',
             buttons: [
                    {extend: 'copy', attr: {id: 'allan'}}, 'csv', 'excel', 'pdf'
                ],
            'columns': [
                { data: 'id_no' },
                { data: 'customer_name' },
                { data: 'seized_remarks' },
                { data: 'seized_date' },
                { data: 'release_probability' },
                { data: 'file_id' },
                
                { data: null,
                  defaultContent: '<a href="https://202.40.176.13/mahindra_portal/admin/seized_vehicles/individual_view/$file_id"><button ><i class="fa fa-search"></i></button></a> <input type="button" id="go" value="Upload Image" /> <button>Edit</button>' },
                


                
            ]
        });
    });

    </script>

enter image description here

Answer

What you can do is define a render function, e.g.:

$('#empTable').DataTable({
    'processing': true,
    'serverSide': true,
    'serverMethod': 'post',
    'ajax': {
      'url':'<?=base_url()?>admin/Employee/empList'
    
    },
     dom: 'Bfrtip',
     buttons: [
            {extend: 'copy', attr: {id: 'allan'}}, 'csv', 'excel', 'pdf'
        ],
    'columns': [
        { data: 'id_no' },
        { data: 'customer_name' },
        { data: 'seized_remarks' },
        { data: 'seized_date' },
        { data: 'release_probability' },
        { data: 'file_id' },
        { data: null,
            render(data) {
                return `<a href="https://202.40.176.13/mahindra_portal/admin/seized_vehicles/individual_view/${data.file_id}"><button ><i class="fa fa-search"></i></button></a> <input type="button" id="go" value="Upload Image" /> <button>Edit</button>`;
            }
        },
    ]
});

This then lets you access whatever’s in the data object. See the documentation