<div id="tblscrolly">/</div>

<div id="tblscrollxy">/</div>
                                

$(function() {
    $('#tblscrolly').puidatatable({
         caption: 'Vertical Scrolling',
         scrollable: true,
         scrollHeight: '200',
         columns: [
             {field: 'vin', headerText: 'Vin'},
             {field: 'brand', headerText: 'Brand'},
             {field: 'year', headerText: 'Year'},
             {field: 'color', headerText: 'Color'}
         ],
         datasource: function(callback) {
             $.ajax({
                 type: "GET",
                 url: 'showcase/resources/data/cars-medium.json',
                 dataType: "json",
                 context: this,
                 success: function(response) {
                     callback.call(this, response);
                 }
             });
         }
     });

     $('#tblscrollxy').puidatatable({
         caption: 'Vertical and Horizontal Scrolling',
         scrollable: true,
         scrollHeight: '200',
         scrollWidth: '75%',
         columns: [
             {field: 'vin', headerText: 'Vin'},
             {field: 'brand', headerText: 'Brand'},
             {field: 'year', headerText: 'Year'},
             {field: 'color', headerText: 'Color'}
         ],
         datasource: function(callback) {
             $.ajax({
                 type: "GET",
                 url: 'showcase/resources/data/cars-medium.json',
                 dataType: "json",
                 context: this,
                 success: function(response) {
                     callback.call(this, response);
                 }
             });
         }
     });
});