dropdown column

dewiazlika

I need add dropdown as column with small table that it get data from another table like below.

colin

Hi @dewiazlika ,

You can use columns.render to create the dropdown in the cell - then it's standard JS on what you put into it.

Cheers,

Colin

dewiazlika

@colin

Thanks colin I have added " render column" and that's work, but I have other problem. how to get data from other table on rendering value. Is possible add php script in javascript?

my code:

$('#example').dataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "scripts/server_processing.php",
    "columnDefs": [ 
    {
        "targets": 0,
        "data": "ID", 
        render: function (data, type, row, meta) {
        return meta.row + meta.settings._iDisplayStart + 1;
        }
    },{
        "render": function (data, type, row) {
        return '<img src="plfp-backedit/assets/images/'+data+'" style="width:70px; height:70px;">';
        },
           "targets": 1
    },{
    "targets": -1,
    // "data": null,
    "render": function (data, type, row) {
    return  "<td class='harga-tingkat' style='width: 25%;'>"+
            "<div class='panel-group' id='accordion'>"+
            "<div class='panel panel-default' id='panel"+data+"'>"+
            "<div class='panel-heading'>"+
            "<h5 class='panel-title'>"+
            "<a class='accordion-toggle collapsed' aria-expanded='false' data-toggle='collapse' data-parent='accordion' href='#collapse"+data+"' style='text-decoration:none;'>"+
            "<strong>100.000</strong>"+
            "</a>"+
            "</h5>"+
            "</div>"+
            "<div id='collapse"+data+"' class='panel-collapse collapse'>"+
            "<div class='table-responsive'>"+
            "<table class='table table-bordered table-striped table-hover'>"+
            "<tr class='warning'>"+
            "<th style='text-align:center;'>Qty</th>"+
            "<th style='text-align:center;'>Harga</th>"+
            "</tr>"+
            "<tr>"+
            "<td></td>"+
            "<td></td>"+
                "</tr>"+
            "</table>"                          
                        "</div>"+
            "</div>"+
            "</div>"+
            "</div>"+
            "</td>";                    
            }        
        } 
    ]
});

dewiazlika

$('#example').dataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": "scripts/server_processing.php",
                "columnDefs": [ 
                    {
                    "targets": 0,
                    "data": "ID", 
                    render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        "render": function (data, type, row) {
                            return '<img src="plfp-backedit/assets/images/'+data+'" style="width:70px; height:70px;">';
                        },
                        "targets": 1
                    },
                    {
                    "targets": -1,
                    // "data": null,
                    "render": function (data, type, row) {
                            return  "<td class='harga-tingkat' style='width: 25%;'>"+
                                        "<div class='panel-group' id='accordion'>"+
                                        "<div class='panel panel-default' id='panel"+data+"'>"+
                                        "<div class='panel-heading'>"+
                                        "<h5 class='panel-title'>"+
                                        "<a class='accordion-toggle collapsed' aria-expanded='false' data-toggle='collapse' data-parent='accordion' href='#collapse"+data+"' style='text-decoration:none;'>"+
                                        "<strong>100.000</strong>"+
                                        "</a>"+
                                        "</h5>"+
                                        "</div>"+
                                        "<div id='collapse"+data+"' class='panel-collapse collapse'>"+
                                        "<div class='table-responsive'>"+
                                        "<table class='table table-bordered table-striped table-hover'>"+
                                        "<tr class='warning'>"+
                                        "<th style='text-align:center;'>Qty</th>"+
                                        "<th style='text-align:center;'>Harga</th>"+
                                        "</tr>"+
                                        "<tr>"+
                                        "<td></td>"+
                                        "<td></td>"+
                                        "</tr>"+
                                        "</table>"+
                                        "</div>"+
                                        "</div>"+
                                        "</div>"+
                                        "</div>"+
                                        "</td>";                    
                            }        
                    } 
                ]
            });

colin

Hi @dewiazlika ,

If it's server based, which I assume it is as you're talking about getting the value with PHP, it would make sense to get the original Ajax request to send that data too - it would avoid unnecessary additional calls and you can send the data in the format that would help the render.

Cheers,

Colin

dewiazlika

hey @colin

Yes I use a library https://github.com/emran/ssp in server based.
Yeah I can use ajax request to post PHP data. I try create trigger event click and add ajax request post data.

thanks any way