Why isnt datatables taking this data.

shicks22

I have the following data format coming from vb. ashx page. I receive an error from google developer. Where am I missing the boat?

failed to load resource: the server responded with a status of 400 (Bad Request), http://localhost:49630/[%7B%22UnitId%22:%22181%22,%22occustatus%22:%22VA%22,%22UnitType%22:%221X1%22,%22UnitSubType%22:%22L%22,%22CurrUseSqFtg%22:657.0,%22LastMarketRent%22:735.0,%22VacateDate%22:%222015-10-30T00:00:00%22,%22BedRooms%22:1,%22Baths%22:1.0,%22MarketRent%22:735.0%7D,%7B%22UnitId%22:%22077%22,%22occustatus%22:%22VA%22,%22UnitType%22:%221X1%22,%22UnitSubType%22:%22LWD%22,%22CurrUseSqFtg%22:657.0,%22LastMarketRent%22:775.0,%22VacateDate%22:%222016-01-?_=1458047740719

contained in data

[{
        "UnitId": "181",
        "occustatus": "VA",
        "UnitType": "1X1",
        "UnitSubType": "L",
        "CurrUseSqFtg": 657.0,
        "LastMarketRent": 735.0,
        "VacateDate": "2015-10-30T00:00:00",
        "BedRooms": 1,
        "Baths": 1.0,
        "MarketRent": 735.0
    }, {
        "UnitId": "077",
        "occustatus": "VA",
        "UnitType": "1X1",
        "UnitSubType": "LWD",
        "CurrUseSqFtg": 657.0,
        "LastMarketRent": 775.0,
        "VacateDate": "2016-01-08T00:00:00",
        "BedRooms": 1,
        "Baths": 1.0,
        "MarketRent": 735.0
    }, {
        "UnitId": "089",
        "occustatus": "VA",
        "UnitType": "1X1",
        "UnitSubType": "LWD",
        "CurrUseSqFtg": 657.0,
        "LastMarketRent": 735.0,
        "VacateDate": "2015-10-31T00:00:00",
        "BedRooms": 1,
        "Baths": 1.0,
        "MarketRent": 735.0
    }, {
        "UnitId": "093",
        "occustatus": "VA",
        "UnitType": "1X1",
        "UnitSubType": "LWD",
        "CurrUseSqFtg": 657.0,
        "LastMarketRent": 735.0,
        "VacateDate": "2015-08-15T00:00:00",
        "BedRooms": 1,
        "Baths": 1.0,
        "MarketRent": 735.0
    }, {
        "UnitId": "165",
        "occustatus": "VA",
        "UnitType": "1X1",
        "UnitSubType": "LWD",
        "CurrUseSqFtg": 657.0,
        "LastMarketRent": 735.0,
        "VacateDate": "2015-10-26T00:00:00",
        "BedRooms": 1,
        "Baths": 1.0,
        "MarketRent": 735.0
    }, {
        "UnitId": "066",
        "occustatus": "NA",
        "UnitType": "1X1",
        "UnitSubType": "UWD",
        "CurrUseSqFtg": 657.0,
        "LastMarketRent": 735.0,
        "VacateDate": null,
        "BedRooms": 1,
        "Baths": 1.0,
        "MarketRent": 735.0
    },

I have this code.

 $.ajax({
            url: 'UnitAvailability.ashx',
            type: 'POST',
            //dataType: 'json',
                        //  data: JSON.stringify($('form').serializeObject()),
            data:  JSON.stringify(test),

            success: function (data) {
               
               
                $('#rootwizard').bootstrapWizard('next');

                $('#example').dataTable({
                    searching: false,
                    ajax: data,
                    dataSrc: ''
                    columns: [
                           { data: 'UnitId' },
                           { data: 'UnitType' }
                    ]
                });
                alert(data);
               
                console.log(data);
                localStorage.clear(); 
               
               
            },
            error: function (errorText) {
                alert(errorText);
            }

        }

this is the html

 <div class="row">
                                <div class="col-xs-12">
                                    <table style="width:100%;" class="display" cellspacing="0" id="example">
                                        <thead>
                                            <tr>
                                              
                                                <th>Unit ID</th>
                                                <th>Unit Type</th>
                                                
                                            </tr>

                                        </thead>
                                        <tfoot>
                                            <tr>
                                               <th>My Price</th>
                                            </tr>
                                        </tfoot>
                                        <tbody>
                                            <!--<tr>
                                                <td><input type="checkbox" /></td>
                                                <td>003</td>
                                                <td>2x2</td>
                                                <td>2</td>
                                                <td>2</td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" /></td>
                                                <td>005</td>
                                                <td>1X1</td>
                                                <td>1</td>
                                                <td>1</td>
                                            </tr>-->
                                        </tbody>

                                    </table>
                                    
                                  
                                </div>
                            </div>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Hi,

Can you try using 'data: data' rather than 'ajax: data' please? You have the data already from your custom Ajax request, so no need to tell DataTables to use Ajax.

Regards,
Allan

shicks22

Sorry here is the html

 <div class="row">
                                <div class="col-xs-12">
                                    <table style="width:100%;" class="display" cellspacing="0" id="example">
                                        <thead>
                                            <tr>
                                              
                                                <th>Unit ID</th>
                                                <th>Unit Type</th>
                                                
                                            </tr>

                                        </thead>
                                        <tfoot>
                                            <tr>
                                               <th>My Price</th>
                                            </tr>
                                        </tfoot>
                                        <tbody>
                                            <!--<tr>
                                                <td><input type="checkbox" /></td>
                                                <td>003</td>
                                                <td>2x2</td>
                                                <td>2</td>
                                                <td>2</td>
                                            </tr>
                                            <tr>
                                                <td><input type="checkbox" /></td>
                                                <td>005</td>
                                                <td>1X1</td>
                                                <td>1</td>
                                                <td>1</td>
                                            </tr>-->
                                        </tbody>

                                    </table>
                                    
                                  
                                </div>
                            </div>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

shicks22

All I did was change the ajax to data, and I received back,
table id = example
Requested unknown parameter "1" for row 0, columne 1. For more information ....

Sending you a picture of the grid and data to your email, that says it now has 7340 entries, when only 38 records where returned. So its not breaking it up correctly for some reason. Google developer show no errors.

thanks

allan

You currently have //dataType: 'json', commented out. Could you comment it back in please? Also adding console.log( data ) might be interesting.

Finally, could you use the DataTables debugger to take a trace and let me know what the debug code is please.

Thanks,
Allan

shicks22

ok, just changing it to datatype:'json' worked. Thank you so much!

I also sent you a look at the log, now.

shicks22

One more thing on this topic, someone else told me to use this which is working and what I posted earlier. using "aaData" rather thank just data: and aoColumns instead of just columns.

 $('#example').dataTable({
                    "aaData": data,   //this is your JSON object, which is what is showing in your post above with console.log(data)
                    "aoColumns": [{
                        "mDataProp": "UnitId"
                    }, {
                        "mDataProp": "UnitType"
                    }]
                });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

The aaData parameter is the legacy option (from 1.9 and earlier). It is still supported for backwards compatibility, but the data option is the preferred naming and is what will be used in all of the DataTables.net examples and documentation (minus the legacy site and legacy forum comments).

Allan