Javascript + php - hide value from array

I am using the below code in a php page that populates a datatable, it is not my own code, code i found on the web.  when the datatable populates from the below code, I want the first value in the array to be hidden, there are multiple rows in the array so the first value of each row is the one that I want hidden - could someone help me understand where in this code i could do this

		
<script type="text/javascript" language="javascript" >
			$(document).ready(function() {
			   var dataTable =  $('#availgames-grid').DataTable( {
			   	    responsive: {
					details: {
					    renderer: function ( api, rowIdx ) {
						var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
						    var header = $( api.column( cell.column ).header() );
						    return  '<p style="color:#00A">'+header.text()+' : '+api.cell( cell ).data()+'</p>';
						} ).toArray().join('');
 
						return data ?    $('<table/>').append( data ) :    false;
					    }
					}
				    },
			   	processing: true,
				serverSide: true,
				ajax: "availgames-grid-data.php", // json datasource
			    } );
			} );
		</script>

Open in new window

dkilbyAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
https://datatables.net/examples/basic_init/hidden_columns.html

In the columnDef's, your target is the the column. Since the array starts at zero, the first set of data is going to be zero.  You have the options to make the item not visible but still searchable.


$(document).ready(function() {
    var dataTable = $('#availgames-grid').DataTable({
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],


        responsive: {
            details: {
                renderer: function(api, rowIdx) {
                    var data = api.cells(rowIdx, ':hidden').eq(0).map(function(cell) {
                        var header = $(api.column(cell.column).header());
                        return '<p style="color:#00A">' + header.text() + ' : ' + api.cell(cell).data() + '</p>';
                    }).toArray().join('');

                    return data ? $('<table/>').append(data) : false;
                }
            }
        },
        processing: true,
        serverSide: true,
        ajax: "availgames-grid-data.php", // json datasource
    });
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.