DataTables stuck "Loading..."

AllenTCrane

So I have a dataTable that I want to initialize on page load and then pass in various parameters. If I don't initialize it on page load none of the styles or paging loads. I can see it calling the api with the right values but the data table is just stuck. the API I am calling is /api/drug/SearchAlternativeDrugs?value=ASPRIN and it works fine.

I also know the second method works, but the dataTable isn't initialized so I don't get paging or sorting or scrolling which is what I need.

Thanks in advance for the help

 <input type="text" id="drug" />
<button id="SearchAlt" class="btn" onclick="SearchAltDrugs()">Show Alternatives</button>
<table Class="table table-bordered table-hover table-striped" id="altDrugs">
    <thead>
        <tr>
            <th>Brand Alternatives </th>
            <th>est</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

function DrugName() { return $("#drug").val(); } function SearchAltDrugs() { var name = DrugName(); if (name == '') { bootbox.alert("Please enter Medication"); return; } $('#altDrugs').DataTable().ajax.reload(); } $("#altDrugs") .DataTable({ ajax: { url: "/api/drug/SearchGenericAlternative", type: "GET", data: function(d) { d.value = DrugName(); } }, columns: [ { data: "name" }, { data: "averageCost" } ] });

function SearchAltDrugs() {
var name = $("#drug").val();

        if (name == '') {
            bootbox.alert("Please enter Medication");
            return;
        }

        SearchGenericAlternative();
        table = $("#altDrugs")
            .DataTable({
                ajax: {
                    url: "/api/drug/SearchAlternativeDrugs?value=" + name,
                    dataSrc: ""
                },
                "destroy": true,

                columns: [
                    {
                        data: "name",
                        render: function(data) {

                            var encoded = encodeURIComponent(data);

                            return '<div onClick=ChangeDrug(\'' + encoded + '\'); >' + data + '</div>';
                        }
                    },
                    {
                        data: "averageCost",
                        render: function(data) {
                            var cost = '';
                            if (data != 0) {
                                cost = '$' + data;
                            }
                            return cost;
                        }
                    }
                ]
            });

        table.destroy();
    }

kthorngren

but the dataTable isn't initialized so I don't get paging or sorting or scrolling

Have you looked at the browser's console to see if there are any errors? Features not working is usually a result of Javascript errors.

Kevin