unable to render remote data inside datatable

jQuery UI Widgets
Post Reply
azzam
Posts: 1
Joined: 05 Oct 2016, 08:37

05 Oct 2016, 08:57

Hello,
Can someone help me in this issue.
I'm trying to display datatable locally and remotly.
local data displayed as expected but failed to render remotly data..
does Primeui has Documentation like primefaces??

here is my code
thanks

Code: Select all

<html>
<title>Insert title here</title>
<!-- all needed primeui js and css included -->
<script type="text/javascript">
$(function() {
    var localData = [
        {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'},
        {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'},
        {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'},
        {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'},
        {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'},
        {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'},
        {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'},
        {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'},
        {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'},
        {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}
    ];

    $('#tbllocal').puidatatable({
        caption: 'Local Datasource',
        columns: [
            {field: 'vin', headerText: 'Vin'},
            {field: 'brand', headerText: 'Brand'},
            {field: 'year', headerText: 'Year'},
            {field: 'color', headerText: 'Color'}
        ],
        datasource: localData
    });

    $('#tblremoteeager').puidatatable({
        caption: 'Remote Restful Webservice - Eager',
        paginator: {
            rows: 10
        },
        columns: [
            {field: 'vin', headerText: 'Vin'},
            {field: 'brand', headerText: 'Brand'},
            {field: 'year', headerText: 'Year'},
            {field: 'color', headerText: 'Color'}
        ],
        datasource: function(callback) {
            $.ajax({
                type: "GET",
                url: 'cars-large.json',
                dataType: "json",
                context: this,
                success: function(response) {
                    callback.call(this, response);
                }
            });
        }
    }); 


});
</script>
</head>
<body>
<div id="tbllocal"></div>
<div id="tblremoteeager"></div>

</body>
</html>

Post Reply

Return to “PrimeUI”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests