datatable show/hide columns with checkbox

Question

I have a code in codeigniter, and i am using a data-table, now i want to make a show/hide columns with a checkbox above to let the columns hide or maybe shown. I will populate my data from my database in my controller with these code :

public function dataTable_report($date) {
        $user = array('user_id' => $this->session->userdata['logged_in']['user_id']);
        $myreport = $this->Adminreport_model->getreportDataDaily($user,$date);

        $data = array();
        foreach ($myreport as $patient) {
            $row = array();  
            $row[] = $patient->check_up_id;
            $row[] = $patient->patient_fname;
            $row[] = $patient->patient_lname;
            $row[] = $patient->patient_mname;
            $row[] = $patient->check_up_date;
            $row[] = $patient->clinic_name;
            $row[] = $patient->bill_amt;

            $data[] = $row;
        }
        $output = array(   
            "data" => $data,
        );
        echo json_encode($output);
    }

now here is my data-table that doesn't hide when i check my checkbox above please help me: https://jsfiddle.net/2j6w9hqt/27/

Community · Accepted Answer · 2017-05-23 12:31:59Z

3

I would not recommend manipulating columns visibility by just hiding th element.

Instead look into using Buttons extension and colvis button.

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'colvis',
            columns: ':not(:first-child)'
        }
    ]
} );

See this example for code and demonstration.

I have also modified default appearance of the column visibility button by adding checkboxes, see this answer for more details.

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Feb 27, 2017 at 4:25

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jc John Over a year ago

hello sir why it doesnt appear on me.. Here is my code: function data_table_report(dateselected){ $("#dataTables-report").dataTable().fnDestroy(); table = $('#dataTables-report').DataTable({ "ajax": { "url": "<?php echo site_url('patients_report/dataTable_report/')?>"+dateselected, "type": "POST", }, responsive: true, dom: 'Bfrtip', buttons: [ { extend: 'colvis', columns: ':not(:first-child)' }] }); }

Gyrocode.com Over a year ago

You need to include CSS/JS files for Buttons extension in addition to DataTables CSS/JS files.

Jc John Over a year ago

hello sir, can i add more buttons like buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]

Jc John Over a year ago

i mean can i go with two bftrips?

Collectives™ on Stack Overflow

datatable show/hide columns with checkbox

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related