When using hidden columns, my header filter column will be offset when it returns all

When using hidden columns, my header filter column will be offset when it returns all

lancwplancwp Posts: 85Questions: 18Answers: 1

When using hidden columns, my header filter column will be offset when it returns all
My reference http://live.datatables.net/cusologu/7/edit Unfortunately, I use both hide and show columns. When I hide a column, it is normal to select not all, but when I want to return to all and select all, the filtered column in the page will be offset. Can anyone please help me achieve this?
Partial code:

var editor; // use a global for the submit and return data rendering in the examples


$.fn.dataTable.Api.register('column().searchable()', function() {
  var ctx = this.context[0];
  return ctx.aoColumns[this[0]].bSearchable;
});


function createDropdowns(api) {
    // var column = table.column( $(this).attr('data-column') );
    api.columns([2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26]).every(function() {

    if (this.searchable()) {            
            var that = this;
            var col = this.index();
            var column =   $(this).attr('data-column') ;
            // Only create if not there or blank

        //  var selected = $('thead tr:eq(1) td:data-column-index('+col+'):first select').val();
                var selected = $('thead tr:eq(1) td:eq(' + col + ') select').val();
            if (selected === undefined || selected === '') {
                // Create the `select` element
                $('thead tr:eq(1) td')
                    .eq(col)
                    .empty();
//              var select = $('<select><option value=""></option></select>')
        var select = $('<select style="border:1px solid #ced4da;height:30px;width:60px;"><option value="">全部</option></select>')

//            .appendTo($('thead tr:eq(1) td:data-column-index('+col+'):first '))
                .appendTo($('thead tr:eq(1) td').eq(col))

                    .on('change', function() {
//                      that.search($(this).val()).draw();

                    that.search($(this).val()).draw();
                        createDropdowns(api);
                                            });

                api
                    .cells(null, col, {
                        search: 'applied'
                    })
                    .data()
                    .sort()
                    .unique()
                    .each(function(d) {

                    if ((d === 'undefined')|| (d === '')||  (d === null)){
            d = '(Empty)'
          }     
                           if(that.search() === '^'+d+'$'){
        select.append( '<option value="'+d+'" selected="selected">'+d+'</option>' )
    } else {
        select.append( '<option value="'+d+'">'+d+'</option>' )
    }

                    });






            }
        }
    });
}

...............................




$(document).ready(function() {
// Create date inputs


    editor = new $.fn.dataTable.Editor( {
        ajax: "controllers/staffbs.php",
        table: "#example",

...............................................











    "sProcessing": "正在加载中...", 
     //"bStateSave": true,//是否启用服务器处理数据源,必须sAjaxSource指明数据源位置
        "bProcessing": true, 
        "bDeferRender": true, //是否启用延迟加载:当你使用AJAX数据源时,可以提升速度。  
//      fixedHeader: true,
        orderCellsTop: true,
columnDefs: [
                {
                "targets":"_all", //指定使用该样式的列
                render: function ( data, type, row, meta ) {
                                return type === 'filter' ?
                                    (data === 'undefined' ||  data === '' ||  data === null ) ? '(Empty)' : data : data;
    }
              },



           ],       

           initComplete: function() {
            createDropdowns(this.api());
        },

     dom: 'QBlfrtip',
        ajax: "controllers/staffbs.php",

        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },





 $('input[type=checkbox].toggle-vis').on( 'click', function (e) {
//        e.preventDefault();
   //$(this).attr("checked", ! $(this).attr("checked"));
    $(this).attr("checked", false);    
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );

    } );

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    See if this thread about handling search inputs when changing column visibility helps. Basically Datatables doesn't know about the search inputs so you need to clear and reapply them each time the column visibility changes.

    If you still need help please update the test case to show the issues you are having so we can offer specific suggestions.

    Kevin

Sign In or Register to comment.