Search code examples
jquerydatatablesshow-hide

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,
            }],
        });

Solution

  • 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;
                }
            }
        ]
    });