Datatable Not Drawing When Applying External Dropdown Filter

murday1983

I have 2 external filters one is an 'input' and the other is a drop-down.

The drop-down options are populated from my render. and the value is changed into a readable format.

Issue i am having is that when i select a value its not drawing the table. My external input is working perfect though.

NOTE that the 2nd column is not populated from my JSON its populated depending on the parts of the string returned for the 1st column.

HTML

<div class="row">
    <div class="col-xs-12 col-md-10">
        <select id="select" class="form-control">
            <option id="default">Please select</option>
        </select>
        <input id="nameField" type="text" class="form-control">
        <table id="manageDialPlanMainDataTable" class="table table-hover">
            <thead>
                <tr>
                    <th style="width: 100px">Number</th>
                    <th>Number type</th>
                    <th style="width: 100px"></th>
                    <th style="width: 100px"></th>
                    <th style="width: 100px"></th>
                    <th style="width: 130px"></th>
                    <th style="width: 200px"></th>
                    <th style="width: 200px"></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

JQuery

var manageDialPlanMainDataTable = $('#manageDialPlanMainDataTable').DataTable({
    "ordering": true,
    "paging": true,
    "searching": true,
    "info": false,
    "pagingType": 'simple_numbers',
    "pageLength": 10,
    "dom": '<"top"f>rt<"bottom"lp><"clear">',
    "lengthMenu": [
        [10, 25, 50, -1],
        [10, 25, 50, "All"]
    ],
    "ajax": {
        "type": 'GET',
        "url": '../_IncomingCallCode/jsons/manageDpMainTable.json',
        "data": function (data) {
            return data;
        },
        "error": function () {
            $('#manageDialPlanMainDataTable_wrapper').hide();
            $('#existingRuleLoadErrorMessage').html(
                '<p>There was an issue retrieving data. Please try again.</p>' +
                '<p>If the error keeps occurring, please get in touch.</p>').addClass('text-danger');
        }
    },
    "columns": [
        {
            "data": null,
            "render": function (data) {
                telNumberSelected = data.telnum;
                strippedTelNo = telNumberSelected.split('-')[0];

                if ($.isNumeric(strippedTelNo)) {
                    strippedTelNo = '0' + strippedTelNo;

                    return strippedTelNo;
                } else {
                    return strippedTelNo;
                }
            }
        },
        {
            "searchable": false,
            "sorting": false,
            "orderable": false,
            "data": null,
            "render": function (data) {
                telNumberSelected = data.telnum;

                if (telNumberSelected.includes('-')) {
                    var telNumberSelectedType = telNumberSelected.split('-')[1];
                    var option;

                    if (telNumberSelectedType == 'oo') {
                        telNumberSelectedType = 'Out of hours';

                        option = "<option>" + telNumberSelectedType + "</option>"
                        $('#select').append(option);

                        return telNumberSelectedType
                    } else if (telNumberSelectedType == 'w') {
                        telNumberSelectedType = 'Working hours';

                        option = "<option>" + telNumberSelectedType + "</option>"
                        $('#select').append(option);

                        return telNumberSelectedType
                    } else {
                        var telNumberSelectedTypeOriginal = telNumberSelectedType;

                        // Add space between capitals if value doesn't have one
                        telNumberSelectedType = telNumberSelectedType.replace(/([A-Z])/g, ' $1').trim();
                        // Lowercases second word
                        telNumberSelectedType = telNumberSelectedType.charAt(0).toUpperCase() + telNumberSelectedType.substr(1).toLowerCase();

                        option = "<option>" + telNumberSelectedType + "</option>"
                        $('#select').append(option);

                        return telNumberSelectedType
                    }
                } else {
                    telNumberSelectedType = 'N/A';

                    option = "<option>" + telNumberSelectedType + "</option>"
                    $('#select').append(option);

                    return telNumberSelectedType
                }
            },
            "createdCell": function (td) {
                // Populates each Num Type' TD with a 'Name'
                if (telNumberSelected.includes('-')) {
                    var telNoSelectedType = telNumberSelected.split("-").pop();
                    var telNoSelectedType = '-' + telNoSelectedType;

                    $(td).attr('name', telNoSelectedType);
                } else {
                    telNoSelectedType= 'N/A';

                    $(td).attr('name', telNoSelectedType);
                }
            }
        }
    ],
    "initComplete": function () {
        var selectedNumType = {};

        // Removes duplicate values
        $('#select > option').each(function () {
            if (selectedNumType[this.value]) {
                $(this).remove();
            } else {
                selectedNumType[this.value] = this.text;
            }
        });
    }
});

$('#select').on('change', function () {
    var selectedOption = this.value;

    if (selectedOption  != 'Please select') {
        manageDialPlanMainDataTable.column(1).search(selectedOption).draw();
    } else {
        manageDialPlanMainDataTable.column(1).search('').draw();
    }
});

$('#nameField').on('keyup', function () {
   var firstNameVal = this.value;
    
    if (firstNameVal != '') {
        manageDialPlanMainDataTable.column(0).search(firstNameVal).draw();
    } else {
        manageDialPlanMainDataTable.column(0).search('').draw();
    }
});

colin

Hi @murday1983 ,

That's a lot of code to look at. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin