Usage of jQuery Datatable

Hide ID column but still able to get item ID:

Use CSS instead of “columnDefs”:

Reference:

  1. http://stackoverflow.com/questions/14372655/jquery-datatables-hide-column-without-removing-it-from-dom

CSS:

​#film_table tr.row_selected td{background:#CCC;}

 

var cat_id = 1;
var d_table = null;
var order = [[ 6, "asc" ], [ 5, "" ]];
var selected_id = 0;

var datatable = {
    init: function(){
        var wrap = this;
        d_table = $('#datatable').dataTable( {
            'pageLength': 20, //20 items per page
            "lengthMenu": [[20, 50, -1], [20, 50, "All"]], 
            "ajax": {
				'url': '<?=base_url()?>index.php/admin/page/all/' + cat_id, 
				'data': function(d){
					d.param = 'value';
				}
			},
            "order": order, 
            "columnDefs": [
                {
                    "targets": [ 6 ],
                    "visible": false,
                    "searchable": false, 
                    "orderable": false, 
                    "className": "class_name"
                }
            ], 
            'fnServerParams': function(aoData){
                //Append extra parameters
                //console.log(aoData);
                aoData.push({
                    'name': 'countries', 
                    'value': $('#country').val()
                });
            }, 
			//This callback will be triggered multiple times
			"drawCallback": function( settings ) {
                var api = this.api();
                wrap.loaded(settings);
            }, 
			//This callback will be triggered only once
            "fnInitComplete": function(oSettings, json) {
              console.log('fnInitComplete');
              console.log($('#datatable input[name="users"]').size());
            }
        });

        $('#datatable tbody').on( 'click', 'tr', function () {
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }else {
                d_table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }

            //console.log( table.row( this ).data() );
            selected_id = wrap.get_id($(this));
            $('#item_id').val(selected_id);
        });

        $('#datatable tbody').on( 'click', '.edit_item', function (e) {
            e.preventDefault();
            window.location.href = '<?=base_url()?>index.php/admin/page/edit/' + cat_id + '/' + selected_id;
        });

        $('#datatable tbody').on( 'click', '.sort_up', function (e) {
            e.preventDefault();
            var cat_id = $('#cat_id').val();
            wrap.sort(cat_id, selected_id, 'up');
        });

        $('#datatable tbody').on( 'click', '.sort_down', function (e) {
            e.preventDefault();
            var cat_id = $('#cat_id').val();
            wrap.sort(cat_id, selected_id, 'down');
        });
    }, 
    loaded: function(oSettings){
        //Table loaded
		var wrap = datatable;
        var $table = $('#datatable');

        $table.find('tbody tr').unbind().on( 'click', function () {
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }else {
                d_table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }

            //console.log( table.row( this ).data() );
            selected_id = wrap.get_id($(this));
            $('#item_id').val(selected_id);
        });

        $table.find('.edit_item').unbind().on( 'click', function (e) {
            e.preventDefault();
            window.location.href = '<?=base_url()?>index.php/admin/product/edit/' + cat_id + '/' + selected_id;
        });
    }, 
    get_id: function($row){
        return $row.find('>td:first').text();
    }, 
    refresh: function(){
        var wrap = this;
        d_table.fnDestroy();
        wrap.init();
    },  
    delete_item: function(){
        var wrap = this;
        var params = {
            id: selected_id
        }

        $.ajax('<?=base_url()?>index.php/admin/page/delete', {
            type: 'POST', 
            data: params, 
            success: function(data, textStatus, jqXHR){
                //console.log(data);
                if(typeof data.err_code == 'undefined'){
                    show_msg('Error', data);
                }else if(data.err_code == 0){
                    //show_msg('Info', 'Item has been deleted');
                    window.location.reload();
                }else{
                    show_error(data.err_code, data.err);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('Error:' + jqXHR.responseText);
                wrapper.refresh_tree();
            }
        });
    }, 
    sort: function(cat_id, selected_id, direction){
        var wrap = this;
        var params = {
            cat_id: cat_id, 
            id: selected_id, 
            direction: direction, 
            sort_direction: 'desc'
        }

        $.ajax('<?=base_url()?>index.php/admin/page/sort', {
            type: 'POST', 
            data: params, 
            success: function(data, textStatus, jqXHR){
                //console.log(data.err_code == 0 && err == '');
                //return;
                if(typeof data.err_code == 'undefined'){
                    show_msg('Error', data);
                }else if(data.err_code == 0 && data.err == ''){
                    //console.log(wrap);
                    //window.location.reload();
                    wrap.refresh();
                }else{
                    show_error(data.err_code, data.err);
                }
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert('Error:' + jqXHR.responseText);
            }
        });
    }
}

 

Localized txt file content:

{
	"sProcessing": "處理中...",
	"sLengthMenu": "_MENU_ <span>筆/頁</span>",
	"sZeroRecords": "沒有資料.",
	"sInfo": "顯示 <span>_START_</span> 到 <span>_END_</span> 共 <span>_TOTAL_</span> 筆資料",
	"sInfoEmpty": "顯示 <span>0</span> 到 <span>0</span> 共 <span>0</span> 筆資料",
	"sInfoFiltered": "(gefiltert von _MAX_  Einträgen)",
	"sInfoPostFix": "",
	"sSearch": "<span>查詢:</span> ",
	"sUrl": "",
	"oPaginate": {
		"sFirst":    "第一頁",
		"sPrevious": "上一頁",
		"sNext":     "下一頁",
		"sLast":     "最後一頁"
	}
}

Reference: