How to populate datatable and columns header from external json

Question

I have a table which I am using with jquery datatable plugin,Here All my functionalities are working fine but I need to fetch the table data and column header from ajax call and external json. Currently I have used a variable and fetching the data.Below is the separate html,json and script file code has been given. Thanks in advance.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="script.js"></script>
<table id="example" class="display" cellspacing="0" width="100%"></table>

<script>
    var dataSet = [{
        "Latitude": 18.00,
        "Longitude": 23.00,
        "Name": "Pune"
    }, {
        "Latitude": 14.00,
        "Longitude": 24.00,
        "Name": "Mumbai"
    }, {
        "Latitude": 34.004654,
        "Longitude": -4.005465,
        "Name": "Delhi"
    }, {
        "Latitude": 23.004564,
        "Longitude": 23.007897,
        "Name": "Jaipur"
    }];
    var my_columns = [];

    $.each(dataSet[0], function(key, value) {
        var my_item = {};
        my_item.data = key;
        my_item.title = key;
        my_columns.push(my_item);
    });

    $(document).ready(function() {
        var tables = $('#example').DataTable({
            "columnDefs": [{
                "targets": 0,
                "createdCell": function(td, cellData, rowData, row, col) {
                    if ((cellData > 3) && (cellData < 15)) {
                        $(td).css('color', 'green')
                    } else
                    if ((cellData > 16) && (cellData < 20)) {
                        $(td).css('color', 'orange')
                    } else
                    if ((cellData > 21) && (cellData < 35)) {
                        $(td).css('color', 'red')
                    }
                }
            }],
            dom: 'l<"#add">frtip',
            "language": {
                "paginate": {
                    "previous": "<&nbsp;Previous",
                    "next": "next&nbsp;>"
                }
            },
            data: dataSet,
            "columns": my_columns
        })
        $('<label/>').text('Search Column:').appendTo('#add')
        $select = $('<select/>').appendTo('#add')

        $('<option/>').val('All').text('All').appendTo($select);
        $('<option/>').val('0').text('Long').appendTo($select);
        $('<option/>').val('1').text('Lat').appendTo($select);
        $('<option/>').val('2').text('Name').appendTo($select);

        $('input[type="search"]').on('keyup change recheck', function() {
            var searchValue = $(this).val();
            var columnSearch = $select.val();

            $('#example').DataTable().columns().every(function() {
                //alert('hi');
                this.search('');
            });

            if (columnSearch == 'All') {
                tables.search(searchValue).draw();
            } else {
                tables.columns(columnSearch).search(searchValue).draw();
            }
        });
        $select.on('change', function() {
            $('#example').DataTable().search('').draw();
            $('input[type="search"]').trigger('recheck');
        });
    });
</script>

shajji · Accepted Answer · 2018-08-15T12:47:47.827

To load .json file with ajax u must need a server else u get this error Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. in console
OR if u want to run locally check this answere.
code to load .json file

<script src="assets/js/jquery-3.3.1.min.js"></script>
<script>
   $.ajax({
       url: 'demo.json',
       dataType: 'json',
       success: function(data) {
           console.log(data);
       }
   });
</script>

your .json file should look like below

[{
    "Latitude": 18.00,
    "Longitude": 23.00,
    "Name": "Pune"
}, {
    "Latitude": 14.00,
    "Longitude": 24.00,
    "Name": "Mumbai"
}, {
    "Latitude": 34.004654,
    "Longitude": -4.005465,
    "Name": "Delhi"
}, {
    "Latitude": 23.004564,
    "Longitude": 23.007897,
    "Name": "Jaipur"
}]

Edited I'm not authorized for comments yet. thats y answere here.
You can use it like below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="script.js"></script>
<table id="example" class="display" cellspacing="0" width="100%"></table>
<script>
    $.ajax({
        url: 'demo.json',
        dataType: 'json',
        success: function(jsondata) {
            var my_columns = [];

            $.each(jsondata[0], function(key, value) {
                var my_item = {};
                my_item.data = key;
                my_item.title = key;
                my_columns.push(my_item);
            });
            var tables = $('#example').DataTable({
                "columnDefs": [{
                    "targets": 0,
                    "createdCell": function(td, cellData, rowData, row, col) {
                        if ((cellData > 3) && (cellData < 15)) {
                            $(td).css('color', 'green')
                        } else
                        if ((cellData > 16) && (cellData < 20)) {
                            $(td).css('color', 'orange')
                        } else
                        if ((cellData > 21) && (cellData < 35)) {
                            $(td).css('color', 'red')
                        }
                    }
                }],
                dom: 'l<"#add">frtip',
                "language": {
                    "paginate": {
                        "previous": "<&nbsp;Previous",
                        "next": "next&nbsp;>"
                    }
                },
                data: jsondata,
                "columns": my_columns
            })
            $('<label/>').text('Search Column:').appendTo('#add')
            $select = $('<select/>').appendTo('#add')

            $('<option/>').val('All').text('All').appendTo($select);
            $('<option/>').val('0').text('Long').appendTo($select);
            $('<option/>').val('1').text('Lat').appendTo($select);
            $('<option/>').val('2').text('Name').appendTo($select);

            $('input[type="search"]').on('keyup change recheck', function() {
                var searchValue = $(this).val();
                var columnSearch = $select.val();

                $('#example').DataTable().columns().every(function() {
                    //alert('hi');
                    this.search('');
                });

                if (columnSearch == 'All') {
                    tables.search(searchValue).draw();
                } else {
                    tables.columns(columnSearch).search(searchValue).draw();
                }
            });
            $select.on('change', function() {
                $('#example').DataTable().search('').draw();
                $('input[type="search"]').trigger('recheck');
            });
        }
    });
</script>

I am using local server only..and I can able to run other example with localhost by putting the url as http://localhost/datatables/demo.json/, that is not a problem,but in the current example how to call with ajax with remaining functionalities — A prasad, Aug 15 '18 at 12:06
u can check edited, sorry i didn't know that i can comment here :) — shajji, Aug 15 '18 at 12:41
I need one more help,can I add tag inside second i.e Longitude of all the row — A prasad, Aug 16 '18 at 17:20

How to populate datatable and columns header from external json

HTML

1 Answers1