Usage of jQuery Datatable | Rex's Personal Site

Hide ID column but still able to get item ID:

Use CSS instead of “columnDefs”:

Reference:

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

CSS:

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

1	#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);
            }
        });
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

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_ &lt;span&gt;筆/頁&lt;/span&gt;",
	"sZeroRecords": "沒有資料.",
	"sInfo": "顯示 &lt;span&gt;_START_&lt;/span&gt; 到 &lt;span&gt;_END_&lt;/span&gt; 共 &lt;span&gt;_TOTAL_&lt;/span&gt; 筆資料",
	"sInfoEmpty": "顯示 &lt;span&gt;0&lt;/span&gt; 到 &lt;span&gt;0&lt;/span&gt; 共 &lt;span&gt;0&lt;/span&gt; 筆資料",
	"sInfoFiltered": "(gefiltert von _MAX_  Einträgen)",
	"sInfoPostFix": "",
	"sSearch": "&lt;span&gt;查詢:&lt;/span&gt; ",
	"sUrl": "",
	"oPaginate": {
		"sFirst":    "第一頁",
		"sPrevious": "上一頁",
		"sNext":     "下一頁",
		"sLast":     "最後一頁"
	}
}

{

"sProcessing": "處理中...",

"sLengthMenu": "_MENU_ 筆/頁",

"sZeroRecords": "沒有資料.",

"sInfo": "顯示 _START_ 到 _END_ 共 _TOTAL_ 筆資料",

"sInfoEmpty": "顯示 0 到 0 共 0 筆資料",

"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",

"sInfoPostFix": "",

"sSearch": "查詢: ",

"sUrl": "",

"oPaginate": {

"sFirst": "第一頁",

"sPrevious": "上一頁",

"sNext": "下一頁",

"sLast": "最後一頁"

}

Reference:

Options: retrieve, destroy
https://datatables.net/manual/tech-notes/3
http://datatables.net/examples/basic_init/hidden_columns.html
Custom HTTP variables:
https://datatables.net/examples/server_side/custom_vars.html