Put data from url into dataTable

Question

I got this table code

<table id="tabel_komponen" class="table table-hover">
    <thead>
        <tr>
            <th>ID Komponen</th>
            <th>Nama Komponen</th>
            <th>Ekuivalen SKS</th>
            <th>Ekuivalen Jam</th>
            <th>Indikator</th>
        </tr>
    </thead>
    <tbody id="badan_tabel" >                     
    </tbody>
</table>

And I use the dataTable Plugin to make it looks good, here's the code

$(document).ready( function () {
    $('#tabel_komponen').DataTable();
} );

I want to get the data for the table from this URL : http://paramadina.net:18011/data/psc_komponen

I already try this code

$(document).ready( function () {
    $('#tabel_komponen').DataTable();
} );
var table = $('#tabel_komponen').DataTable( {
    ajax: 'data.json'
} );

alert( 'http://paramadina.net:18011/data/psc_komponen'+table.ajax.url() );

but it dont worked...And I want to add an edit button into the table

Thanks!!!!

Answer 1

If http://paramadina.net:18011/data/psc_komponen/data.json is the URL where JSON file is located, then use the code below:

$(document).ready( function () {
    $('#tabel_komponen').DataTable({
       ajax: 'http://paramadina.net:18011/data/psc_komponen/data.json'
    });
});

As noted by @davidkonrad , unless paramadina.net allows cross-domain requests, the code above will fail. You need to allow such requests or use JSONP or other alternative methods to get the data.