DataTables 1.10.4 server side processing stuck on 'Processing' error message

tschreck

Hello. I'm trying to implement server side processing using DataTables 1.10.4. I'm sending an Ajax request to my server to retrieve records. My server is generating JSON object matching the return data values as expressed here:

http://datatables.net/manual/server-side

Here's my JavaScript code:

    var oTable = $('table#LockListTable').dataTable
    ({
        "displayLength": 10,
        "processing": true,
        "serverSide": true,
        "ajax": 
        {
            contentType: "application/json",
            url: "/api/LockListApi/PostLockListSearch",
            type: "POST",
            data: function (d)
            {
                console.log('--------------- data sent to server:');
                console.log(d);
                return JSON.stringify(d);
            },
            success: function (resultsFromServer)
            {
                console.log('------------------ results from server:');
                console.log(resultsFromServer.data);
            }
        }
    });

Here's my POST:

{"draw":1,"columns":[{"data":0,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":1,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":2,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":3,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":4,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":5,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":6,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":7,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":8,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":9,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":10,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}

Here are the results:

{"draw":1,"recordsTotal":1221,"recordsFiltered":10,"data":[["2628","Simvastatin 10MG - 1000.00 - Tablet","16729-0004-17","16","Keysource Medical","1,000.00","$11.71","$0.0117","$0.0126","($0.0009)","-7.69 %"],["2632","Quetiapine Fumarate 300MG - 60.00 - Tablet","16729-0149-12","23","SouthPointe Wholesale","60.00","$12.00","$0.2000","$0.1086","$0.0914","45.70 %"],["2741","Quetiapine Fumarate 100MG - 100.00 - Tablet","16729-0147-01","24","Harvard Drug","100.00","$6.29","$0.0629","$0.0543","$0.0086","13.67 %"],["2743","Mycophenolate Mofetil 500MG - 100.00 - Tablet","16729-0019-01","21","River City Pharma","100.00","$23.09","$0.2309","$0.2500","($0.0191)","-8.27 %"],["2835","Propranolol Hcl Er 60MG - 100.00 - Capsule","00228-2778-11","20","HealthSource Distributors","100.00","$115.00","$1.1500","$0.9450","$0.2050","17.83 %"],["2856","Simvastatin 20MG - 1000.00 - Tablet","16729-0005-17","16","Keysource Medical","1,000.00","$17.07","$0.0171","$0.0172","($0.0001)","-0.58 %"],["2858","Finasteride 5MG - 30.00 - Tablet","16729-0090-10","21","River City Pharma","30.00","$2.89","$0.0963","$0.0480","$0.0483","50.16 %"],["2859","Mycophenolate Mofetil 250MG - 100.00 - Capsule","16729-0094-01","21","River City Pharma","100.00","$12.99","$0.1299","$0.1439","($0.0140)","-10.78 %"],["2860","Tacrolimus 0.5MG - 100.00 - Capsule","16729-0041-01","21","River City Pharma","100.00","$36.99","$0.3699","$0.2700","$0.0999","27.01 %"],["2918","Pioglitazone Hcl 45MG - 90.00 - Tablet","16729-0022-15","16","Keysource Medical","90.00","$7.83","$0.0870","$0.0663","$0.0207","23.79 %"]]}

All of the JSON objects (POST and results) are valid via http://jsonlint.com/.

The data being returned is not being rendered to the browser. All that's happening is 'Processing...' is stuck on the page. I saw some threads about this same issue happening in the legacy codebase. The error was happening due to invalid JSON. However, this is not the case with my problem because the JSON is valid.

What am I missing?

Thanks - Tom

tschreck

I figured out the problem. It has to do with calling the 'success' callback of the "ajax" part of creating a dataTable. I found in the documentation that we are not supposed to use the 'success' feature of ajax because it's used internally. Below is my new approach which now works:

   $('table#LockListTable').DataTable({
        serverSide: true,
        processing: true,
        pageLength: 100,
        ajax:function (data, callback, settings)
        {
            $.ajax
            ({
                contentType: "application/json",
                url: url,
                type: "POST",
                data: JSON.stringify(data),
                statusCode:
                {
                    500: function (xmlHttpRequest)
                    {
                        errorHandlerDefault(xmlHttpRequest);
                    }
                },              
                success: function (resultsFromServer)
                {                   
                    callback(resultsFromServer.Data);
                },
                failure: function (xmlHttpRequest)
                {
                    errorHandlerDefault(xmlHttpRequest);
                }
            });             
        }   
    });

Notice, we are calling jQuery's $.ajax inside of DataTables's ajax call. I know it's a bit confusing. Hope this helps you.

allan

Good to hear you've got it working. I'm going to provide an option so you can use success in future. It leads to too many problems otherwise...

Allan