jingwei jingwei - 2 months ago 17
jQuery Question

DataTables show different button according to query

I use jquery DataTables to get data . i want to show/hide columnDefs:edit button according to the query data,data has an item 'edit': 0-hide edit button,1-show edit button

$('#buget_table').dataTable( {
"aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
"ajax": {
"url": "{{ url('buget.owt_index') }}",
"type": "POST"
},
"columns": [
{ "data": "id", 'searchable': true},
{ "data": "machine_type", 'searchable': true },
{ "data": "machine_room", 'searchable': true },
{ "data": "machine_nums", 'searchable': true },
{ "data": "cpu_nums", 'searchable': true },
{ "data": "mem_nums", 'searchable': true },
{ "data": "disk_type", 'searchable': true },
{ "data": "disk_nums", 'searchable': true },
{ "data": "commit_user", 'searchable': true },
{ "data": "commit_time", 'searchable': true },
],
"columnDefs": [{
"render": function (data, type, full) {
return '<a id="owt_edit" data-toggle="modal" data-target="#buget-modal" class="btn btn-primary btn-sm" href="/buget/buget_query/?action=edit&html=1&id=' +full['id']+ '">detail</a>' +
'<a id="owt_delete" data-toggle="modal" class="btn btn-danger btn-sm" href="javascript:void(0)" onclick=edit_buget("' + full['id'] +'");>edit</a>';
},
"targets": 10,
}],
});

Answer

I'm not sure if I'm clear on the question, but it sounds like you need to render the edit property of your data object. At first I thought you wanted the last search used in the render function, so I've kept that in comments, just in case.

$('#buget_table').dataTable( {
    "aLengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
    "ajax": {
        "url": "{{ url('buget.owt_index') }}",
        "type": "POST"
    },
    "columns": [
        { "data": "id", 'searchable': true},
        { "data": "machine_type", 'searchable': true },
        { "data": "machine_room", 'searchable': true },
        { "data": "machine_nums", 'searchable': true },
        { "data": "cpu_nums", 'searchable': true },
        { "data": "mem_nums", 'searchable': true },
        { "data": "disk_type", 'searchable': true },
        { "data": "disk_nums", 'searchable': true },
        { "data": "commit_user", 'searchable': true },
        { "data": "commit_time", 'searchable': true },
        { 
            data: "edit", 
            searchable: false,
            render: function (data, type, full, meta) {
                if((type === "display")
                {
                    var results = '<any other button>';
                    //var api = new $.fn.dataTable.Api( meta.settings );
                    //var query = api.search();

                    //if((query || query === 0))
                    if(data)
                    {
                        results = '<Your edit button>' + results;
                    }

                    return results;
                }

                return data;
            }
        }
    ]
});
Comments