0

i have a question where i want to hide the column in datatable but still need to access its value.

this is my code

<div class="container">
  <div class="">
    <h1>HRphn</h1>
    <div class="col-sm-8">
    <div class="well clearfix">
        <div class="pull-right"><button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
        <span class="glyphicon glyphicon-plus"></span> Record</button></div></div>
    <table id="posting_grid" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" data-toggle="bootgrid">
        <thead>
            <tr>
                <th data-column-id="id" data-type="numeric" data-identifier="true">Posting No</th>
                <th data-column-id="position">Position</th>
                <th data-column-id="department">Department</th>
                <th data-column-id="vacancy">Vacancy</th>
                <th data-column-id="postingdate">Date</th>
                <th data-column-id="status">Status</th>
                <th data-column-id="qualification" clas="hidden-lg"></th>
                <th data-column-id="experience" class="hidden-lg"></th>
                <th data-column-id="criteria1" class="hidden-lg"></th>
                <th data-column-id="criteria2" class="hidden-lg"></th>
                <th data-column-id="criteria3" class="hidden-lg"></th>
                <th data-column-id="jd1" ></th>
                <th data-column-id="jd2" ></th>
                <th data-column-id="jd3" ></th>
                <th data-column-id="jd4" ></th>
                <th data-column-id="jd5" ></th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
            </tr>
        </thead>
    </table>
</div>

i want to hide this 

<th data-column-id="qualification" data-class="hidden"></th>
                <th data-column-id="experience" data-class="hidden"></th>
                <th data-column-id="criteria1" data-class="hidden"></th>
                <th data-column-id="criteria2" data-class='hidden'></th>
                <th data-column-id="criteria3" data-class='hidden'></th>
                <th data-column-id="jd1" ></th>
                <th data-column-id="jd2" ></th>
                <th data-column-id="jd3" ></th>
                <th data-column-id="jd4" ></th>
                <th data-column-id="jd5" ></th>

but..if i hide those value..i cant access them at 

grid.find(".command-edit").on("click", function(e)
{
    //alert("You pressed edit on row: " + $(this).data("row-id"));
        var ele =$(this).parent();
        var g_id = $(this).parent().siblings(':first').html();
        var g_name = $(this).parent().siblings(':nth-of-type(7)').html();
                    console.log(g_id);
                console.log(g_name);

    //console.log(grid.data());//
    $('#edit_model').modal('show');
                if($(this).data("row-id") >0) {

                            // collect the data
                            // $('#edit_id').val(ele.siblings(':first').html()); // in case we're changing the key
                            $('#edit_position').val(ele.siblings(':nth-of-type(2)').html());
                            $('#edit_department').val(ele.siblings(':nth-of-type(3)').html());
                            $('#edit_vacancy').val(ele.siblings(':nth-of-type(4)').html());
                                                            $('#edit_qualification').val(ele.siblings(':nth-of-type(7)').html());
                                                            $('#edit_experience').val(ele.siblings(':nth-of-type(8)').html());
                                                            $('#edit_postingdate').val(ele.siblings(':nth-of-type(5)').html());
                                                            $('#edit_status').val(ele.siblings(':nth-of-type(6)').html());
                                                            // $('#edit_description').val(ele.siblings(':nth-of-type(9)').html());
                } else {
                 alert('Now row selected! First select row, then click edit button');
                }
})

i have tried solution at Bootstrap-Table: How to hide a column without deleting it from the DOM? but it doesnt seem to hide the column at all

Nik Shakirin
  • 1
  • 1
  • 5

1 Answers1

0

If you are using bootstrap 4+ just add the class .d-none to your columns,

which will set display: none on them.

If you are using bootstrap 3+ it should be .hidden-* where as * is

  • xs
  • sm
  • md
  • lg

for the different screen sizes. Maybe .hidden works as well without the size selector...

Domenik Reitzner
  • 1,583
  • 1
  • 12
  • 21