DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

jQuery DataTables OData connector

jQuery DataTables OData connector

nick_leesonnick_leeson Posts: 3Questions: 1Answers: 0
edited September 2015 in Free community support

First of all, Thanks for creating such an awesome tool.

I am currently using jQuery DataTables OData connector for ODATA v4.

I have a ODATA v4 payload which is in the below format.

{
    "@odata.context": "http://services.odata.org/V4/(S(sehqpfh0u431mdbxwr0muwex))/TripPinServiceRW/$metadata#Airports",
    "value": [{
        "@odata.id": "http://services.odata.org/V4/(S(sehqpfh0u431mdbxwr0muwex))/TripPinServiceRW/Airports('KSFO')",
        "@odata.editLink": "http://services.odata.org/V4/(S(sehqpfh0u431mdbxwr0muwex))/TripPinServiceRW/Airports('KSFO')",
        "IcaoCode": "KSFO",
        "Name": "San Francisco International Airport",
        "IataCode": "SFO",
        "Location": {
            "Address": "South McDonnell Road, San Francisco, CA 94128",
            "City": {
                "CountryRegion": "United States",
                "Name": "San Francisco",
                "Region": "California"
            },
            "Loc": {
                "type": "Point",
                "coordinates": [-122.374722222222,
                37.6188888888889],
                "crs": {
                    "type": "name",
                    "properties": {
                        "name": "EPSG:4326"
                    }
                }
            }
        }
    }]
}

My Javascript is like the one below.

$(document).ready( function () {
                
                $('#products1').dataTable({
                
                    "sPaginationType": "full_numbers",
                    "aLengthMenu": [[2, 5, 10, -1], ["Two", "Five", "Ten", "All"]],
                    
                    "bProcessing": true,
                    "bServerSide": true,

                    "sAjaxSource": "http://services.odata.org/V4/TripPinServiceRW/Airports?format",
                    "aoColumns": [
                                    { "mData": "IcaoCode" },
                                    { "mData": "Name" },
                                    { "mData": "IataCode" }
                    ],
                    "fnServerData": fnServerOData,
                    "iODataVersion": 4,
                    "bUseODataViaJSONP": false
                })
                });

How do I get the values of the Region in my datatable?

Answers

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    I don't use the oData conector, but it looks like it should be something like this

                  { "mData": "Location.City.Region" }
  • nick_leesonnick_leeson Posts: 3Questions: 1Answers: 0

    Thank you for the reply but no luck on this yet.

    The error I am now getting is Requested unknown parameter Location.City.Region from the data source row 0

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    You'll need to debug that step to see what the data structure is. I generallyl prefer Chrome over IE for that sort of work. It is very easy to see all available objects and use the Watch window to test various syntaxes to get what you need.

  • allanallan Posts: 61,665Questions: 1Answers: 10,096 Site admin

    Based upon the above example, I would have given exactly the same response as ThomD.

    Could you please link to a page showing the issue so we can help to debug it please.

    Allan

  • nick_leesonnick_leeson Posts: 3Questions: 1Answers: 0
    edited September 2015

    my complete HTML Page.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
        
        <title>Using dataTable with OData connector</title>
        <style type="text/css" title="currentStyle">
            @import "media/css/demo_page.css";
            @import "media/css/demo_table.css";
            @import "media/css/themes/base/jquery-ui.css";
            @import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
        </style>

        <script src="media/js/jquery.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.odata.js" type="text/javascript"></script>

        <script type="text/javascript" charset="utf-8">
            $(document).ready( function () {
                
                $('#products1').dataTable({
                
                    "sPaginationType": "full_numbers",
                    "aLengthMenu": [[2, 5, 10, -1], ["Two", "Five", "Ten", "All"]],
                    
                    "bProcessing": true,
                    "bServerSide": true,

                    "sAjaxSource": "http://services.odata.org/V4/TripPinServiceRW/Airports",
                    "aoColumns": [
                                    { "mData": "IcaoCode" },
                                    { "mData": "Name" },
                                    { "mData": "IataCode" },
                                    { "mData": "Location.City.Region" }
                    ],
                    "fnServerData": fnServerOData,
                    "iODataVersion": 4,
                    "bUseODataViaJSONP": false
                })
                });
        </script>
    </head>

    <body id="dt_example">

        <div id="container">
            <a href="http://vpllan.github.io/jQuery.dataTables.oData/">Home</a>
            <a href="https://github.com/vpllan/jQuery.dataTables.oData/wiki">Wiki</a>
            
            <div class="full_width big">
                JQuery DataTables OData
            </div>
            
            <h1>Preamble</h1>
            <p>DataTables OData Integration.</p>
        
            <div id="demo">
                <table cellpadding="0" cellspacing="0" border="1" class="display" id="products1">
                    <thead>
                        <tr>
                            <th>IcaoCode</th>
                            <th>Name</th>
                            <th>IataCode</th>
                            <th>Price</th>
                            <th>Release date</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
    
    </body>
</html>
  • allanallan Posts: 61,665Questions: 1Answers: 10,096 Site admin

    I'm afraid we still can't offer any help with that as it does not provide the full information required. As was clearly stated above, please link to the page showing the issue.

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    Without having a live example I see a couple of things. First, you are using the pre1.10 syntax for dataTables. If you don't have an installed base of DT, I'd move up to current syntax. I looked at the JSON that comes back from that URL and it should work. However, none of the documentation for the plugin shows support for deep objects. It might just be a failing of the oData plug in. I'm using DT with JSON data and not using the plug in, so I'd suggest setting aside the plug in and try without it.

    Look at this example.

    http://datatables.net/examples/ajax/deep.html

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.