Datatables with column filters & placeholder text

Al Grant

Hello,

I am using datatables with backend datasource and with column filters. The issue is that when I type in a search term and hit enter the placeholder text comes back. As shown in this video:

https://www.youtube.com/watch?v=MNZbWW3rZho&feature=youtu.be

My code in the javascript is:

$(document).ready(function () {

console.log('doc ready running');

    $('#episodeDashboardTable thead tr#filterrow th').each( function () {
        console.log('each is running');
        var title = $('#episodeDashboardTable thead th').eq( $(this).index() ).text();
        if (title!='FMC') {
            $(this).html('<input type="text" class="form-control input-sm" style="width:100%" onclick="stopPropagation(event);" placeholder="Search ' + title + '" />');
        }
    } );

    $('input').tagsinput('refresh');

    $('input').on('itemAdded', function(event) {
        console.log("Item added");
        table
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });

    var table = $('#episodeDashboardTable').DataTable({
        processing: 'true',
        serverSide: 'true',
        pageLength: 10,
        orderCellsTop: true,
        scrollX: true,
        //ajax: {url: '/getepisodes', dataSrc: ''},
        ajax: { url : '/getepisodes/paginated',
            data: "content"
        },

        "columnDefs": [
            { "data": "eventno", "render": function (data, type, row) { return '<a href=/event/' + data + '>' + data + '</a>'; }, "targets": 0, },
            { "data" : "start_date", "targets" : 1 },
            { "data": "names", "targets" : 2 , "orderable" : false},
            { "data": "address", "targets" : 3 },
            { "data": "fmcEntry", "render": function (data, type, row) {
                    return data === true ? '<div align = "center"><span class="glyphicon glyphicon-ok" style="color:green"></span></div>' :
                        '<div align = "center"><span class="glyphicon glyphicon-remove" style="color:red"></span></div>' ; }, "targets": 4 }
        ]
    });
});

function stopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

I put a breakpoint on the item added function but it appears the placeholder text is coming back after this function completes?

Anyone know what might be bringing back the placeholder text?

Cheers

Al

allan

It looks like you are using another library for the text input - perhaps Select2 or Selectize? I think you'd probably need to refer to their documentation or support channels. My guess is that it will always show the placeholder if tags are enabled (although perhaps that is an option in the library).

Allan