<div class="row grid-margin">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Data Frequency</h4>
                <div id="freq_grid"></div>
            </div>
        </div>
    </div>
</div>
<script>
$(function() {

    $("#freq_grid").jsGrid({
        height: "500px",
        width: "100%",
        sorting: true,
        inserting: true,
        paging: true,
        autoload: true,
        pageSize: 10,
        pageButtonCount: 2,
        controller: {
            loadData: function(filter) {
                return $.ajax({
                    type: "GET",
                    url: "<?=site_url()?>/frequency/get_data",
                    data: filter
                });
            },
            insertItem: function(item) {
                return $.ajax({
                    type: "POST",
                    url: "<?=site_url()?>/frequency/add_row",
                    data: item
                });
            },
            deleteItem: function(item) {
                return $.ajax({
                    type: "POST",
                    url: "<?=site_url()?>/frequency/delete_row",
                    data: item
                });
            }
        },
        fields: [
            { name: "id", title: "No", type: "number", editing: false, width: 50, inserting: false },
            { name: "created_date", title: "Created Date", type: "text", width: 150,inserting: false},
            { name: "duration", title: "Duration", type: "number", width: 150},
            { type: "control" }
        ]
    });
});

</script>
