Filters being drawn over by table

felixgill

Hello,

I apologize for not being able to set this up on fiddle ...

Issue: When the data from the table is being loaded you can see the filters, unpopulated sitting either in the header or the footer. ie: above or below the "Loading..." indicator. But when the table populates with data the filters are ?covered? and cannot be seen.

I switched over to yadcf for a more simple interface and to hopefully get rid of this issue, but it is still happening.

Other factors that may be at play:

Ajax data ....

tabletools is being used
oColReorder is being used

any thoughts ---

I once had the filter box selected and the table drew over it BUT i could see an edge and that it was properly loaded with column data... but only an edge was poking out ....

other factors...

DataTables 1.10.2
Jquery 2.1.1
yadcf 0.8.4
Bootstrap v3.2.0

daniel_r

Can't help mush without an example that reproducing the issue, you can try using the filter_container_id property of the yadcf to place each filter in some specific container, like the third column filter in the following example,
http://yadcf-showcase.appspot.com/DOM_source.html

you can try placing those ids in the th of the table or wherever you want.

felixgill

This does work as a work around...

But... In more detail... In the link you pointed me to, the filter is above the black line that separates it from the body of the data set. This is not the case when I attempt to create my sample. The filter is below the line and I think this makes it susceptible to being redrawn when data hits the table. Here is the JS I am using ...

 <script type="text/javascript">


$(document).ready(function () {
    'use strict';
    var dataAll =@Html.Raw(@ViewBag.AllList); 

    // Create the Data Table
    var oTTable = $('#Main_table').dataTable({

        "data":dataAll,

    "dom": 'RT<"toolbar">lfr<"reset-button"><>t<>ip',
    "oColReorder": {},
    "bProcessing":true,
    "tableTools": {
        "aButtons": [

            {
                sExtends: "xls",
                "oSelectorOpts": {
                    page: 'current'
                },
                "mColumns": "visible"
            },
            {
                "sExtends": "pdf",
                "sPdfOrientation": "landscape",
                "oSelectorOpts": {
                    page: 'current'
                },
                "mColumns": "visible",
                "sPdfSize": "letter"

            },
            "print"
        ]
    },
    "columns": [
 
    {
    "class": 'checkboxDT',
    "searchable": false,
    "orderable": false,
    "data": null,
    "defaultContent": "<input type='checkbox' checked='checked' />"
    },
    { "data": "Property_Name" },
    { "data": "Property_ID" },
    { "data": "Product_Type" },
    { "data": "Property_Type" },
    { "data": "Property_Status" },
    { "data": "Property_Sub_Status" },
    { "data": "Property_Market_Description" },
    { "data": "Property_Market_Long_Description" },
    { "data": "Property_Market_State" },
    { "data": "Complex_Name" },
    { "data": "Complex_ID" },
    { "data": "Complex_Status" },
    { "data": "Complex_Status_Sub" },
  ... ... ... ...
    ],
    "scrollY": "300px",
    "scrollX": "true",
    //"autoWidth": "false",
    //"bAutoWidth": false,
    //"autoWidth": true, // was true -- column experiment
    "aLengthMenu": [[5,10,25, 50, 75, 100, 200, 500, 1000, -1], [5,10,25, 50, 75, 100, 200, 500, 1000, "All"]],
    "iDisplayLength": 5,
    "columnDefs": [// { "targets": [0 ], "visible": true,  "searchable": false },     //
    { "targets": [0], "visible": true, "searchable": false },     //
    { "targets": [1], "visible": true, "searchable": true },     //     <th>Property Name</th>
    { "targets": [2], "visible": true, "searchable": true },     //     <th>Property ID</th>
    { "targets": [3], "visible":  false, "searchable":  false },     //     <th>Product Type</th>
    { "targets": [4], "visible":  false, "searchable":  false },     //     <th>Property Type</th>
    { "targets": [5], "visible": true, "searchable": true },     //     <th>Property Status</th>
    { "targets": [6], "visible": true, "searchable": true },     //     <th>Property Sub Status</th>
    { "targets": [7], "visible": false, "searchable": false },     //     <th>Property Market Description</th>
    { "targets": [8], "visible": false, "searchable": false },     //     <th>Property Market Long Description</th>
    { "targets": [9], "visible": true, "searchable": true },     //     <th>Property Market State</th>
    { "targets": [10], "visible": true, "searchable": true },     //     <th>Complex Name</th>
    { "targets": [11], "visible": false, "searchable": false },     //     <th>Complex ID</th>
    { "targets": [12], "visible": true, "searchable": true },     //     <th>Complex Status</th>
    { "targets": [13], "visible": false, "searchable": false },     //     <th>Complex Status Sub</th>
    { "targets": [14], "visible": false, "searchable": false },     //     <th>Complex Market Description</th>
    { "targets": [15], "visible": false, "searchable": false },     //     <th>Complex Market Long Description</th>
    { "targets": [16], "visible": true, "searchable": true },     //     <th>Complex Market State</th>
    { "targets": [17], "visible": true, "searchable": true },     //     <th>Complex Owners</th>
    { "targets": [18], "visible": false, "searchable": false },     //     <th>Product Type Description</th>
    { "targets": [19], "visible": false, "searchable": false },     //     <th>Market</th>
   
... ... ... ...
   
    ],
    "bJQueryUI": true,
    "bStateSave": true

        }).yadcf([
    //{ column_number: 0, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 1, filter_type: "multi_select", select_type: 'chosen',filter_container_id: "external_filter_container" },
    { column_number: 2, filter_type: "multi_select", select_type: 'chosen' ,filter_container_id: "external_filter_container2"},
    { column_number: 3, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 4, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 5, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 6, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 7, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 8, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 9, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 10, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 11, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 12, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 13, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 14, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 15, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 16, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 17, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 18, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 19, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 20, filter_type: "multi_select", select_type: 'chosen' },
    { column_number: 21, filter_type: "multi_select", select_type: 'chosen' },
  ... ... ...
   
    ]
    );

felixgill

i tried the

Markdown example as it was shown in the http://www.datatables.net/manual/tech-notes/8

$(document).ready( function () {
  var table = $('#myTable').DataTable();
  // ...
} );

But as you can see it didn't render as promised either

daniel_r

yadcf does not support scrollY/scrollX yet (open issue https://github.com/vedmack/yadcf/issues/43) , but I plan to maybe to add support for this, Might be that its the reason that yadcf doesn't render well for you, try removing it and tell me if that the problem

daniel_r

News flash: yadcf DOES support scrollY/scrollX since yesterday , you can grab the 0.8.5.beta.4 from here https://github.com/vedmack/yadcf/blob/master/lab/jquery.dataTables.yadcf.js

Not sure that it fixes your issue, but it might...

felixgill

Yes... it seems that was the issue in it's entirety.

Yadcf works with:
scrollx, scrolly, column reorder,

FYI if anyone is using multi_selector: chosen

the following css is mandatory for long lists of options

.chosen-container .chosen-results {
max-height:125px !important;
}

Thank you once again daniel_r for the assistance. and the Markdown did work, just had to refresh. ;-)