Download with extensions

https://datatables.net/download/

HTML

<link href="{{BASE_URL}}/plugins/DataTables/datatables.min.css" rel="stylesheet" />


<script src="{{BASE_URL}}/plugins/DataTables/datatables.js"></script>

Javascript

var dt_app = function(){
    var $c = null;
    var $t = null;
    var datatable = null;

    function init(){
        $c = $("main");
        $t = $c.find('#dt_table');
        
        init_actions();
        init_dt();
    }

    function init_dt(){
        datatable = $t.DataTable({
            "searching": true,
            "info": true,
            "lengthChange": true,
            "paging": true,
            'serverSide': true, 
            'processing': true, 
            "order": [[ 0, "desc" ]], 
            "ajax": {
                'url': base_url + '/admin/' + controller + '/all',
                'data': function(d){
                    //d.pid = pid;
                }
            },
            'columns': [
                {
                    'data': 'id', 
                    'title': 'ID'
                },
                {
                    'data': 'action', 
                    'title': '動作'
                },
                {
                    'data': 'd_name', 
                    'title': '設備名稱'
                },
                {
                    'data': 'alias', 
                    'title': '別名'
                },
                {
                    'data': 'tag_id', 
                    'title': 'Tag ID'
                },
                {
                    'data': 'device_id', 
                    'title': '設備編號'
                },
                {
                    'data': 'created_at', 
                    'title': '建立時間'
                }
            ],  
            "drawCallback": function( settings ) {
                var api = this.api();
                //wrap.loaded(settings);
                loaded(settings);
            }, 
            'initComplete': function(settings, json){
                //loaded(settings);
            },
            dom: 'lBfrtip',
            buttons: [
                'copy',
                {
                    extend: 'csv',
                    title: 'WashHandRecords',
                    bom : true
                }, 
                {
                    extend: 'excel',
                    title: 'WashHandRecords',
                    bom : true
                }, 
                //'excel',
                //{
                    //extend: 'pdf',
                    //text: 'PDF',
                    //bom : true,
                    //'chartset':'utf-8'},
                'print'
            ]
        });
    }

    function loaded(oSettings){

    }

    function refresh(){
        if(datatable != null){
            datatable.destroy();
        }
        
        init_dt();
    }

    function init_actions(){
        $t.delegate('tbody tr .action.edit', 'click', function(e){
            e.preventDefault();
            var $this = $(this);
            var id = $this.data('id');
            var params = {
                id: id
            }

            window.location.href = base_url + '/admin/' + controller + '/edit?' + $.param(params);
        });

        $t.delegate('tbody tr .action.delete', 'click', function(e){
            e.preventDefault();
            var $this = $(this);
            var id = $this.data('id');

            if(confirm('確定刪除這筆資料?') == true){
                delete_item(id);
            }
        });
    }

    function delete_item(id){
        var params = {
            id: id
        }
        //console.log(params);
        //return;

        $.ajax({
            type: 'post',
            url: base_url + '/admin/' + controller + '/delete',
            data: params,
            dataType: 'json',
            success: function(data){
                if(typeof data.status == 'undefined'){
                    alert(data);
                }else if(data.status == 'fail'){
                    alert(data.message);
                }else{
                    //alert('Item is deleted.');
                    refresh();
                }
            },
            error: function(data){
                console.log(data);
                var errors = data.responseJSON;
                show_response_error(errors);
            }
        });
    }

    return {
        init: init, 
        refresh: refresh
    }
}();