CODEWITHSUNDEEP
javascriptphpjqueryhtmldatatables
user1552172
user1552172

Reputation: 676

datatable column filter not showing up

I have the column filter js on my page along with my datatable and everything is coming up and working no errors in the console, but the inputs at the bottom are not there after the smoothness loads.

<body>
    <div id="stable" style=" margin-left: 2%; margin-right: 2%; display: none">
        <table class="display" id="table_id">
             <thead>
                 <tr>
                     <th>Call Date</th>
                     <th>Unique ID</th>
                     <th>Source</th>
                     <th>App</th>
                     <th>Destination</th>
                     <th>Disposition</th>
                     <th>Duration</th>          
                 </tr> 

                <tr>
                    <th>Call Date</th>
                    <th>Unique ID</th>
                    <th>Source</th>
                    <th>App</th>
                    <th>Destination</th>
                    <th>Disposition</th>
                    <th>Duration</th>    
                </tr>
             </thead>
             <tbody></tbody>            
        </table>
    </div>           
</body>

$('#table_id').dataTable({
        "sAjaxSource": '/php/connect/searchtablequery.php',
        "bProcessing": true,
        "sScrollY": "500px",
        "bDeferRender": true,
        "bDestroy": true,
        "bFilter": true,
        "aaSorting": [[0, 'desc']],
        "sAjaxDataProp": "",
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "db", "value": selected });
        },
        "aoColumns": [
            { "sWidth": "15%", "mData": "calldate" },
            { "sWidth": "15%", "sClass": "system", "sType": "string", "sWidth": "15%", "mData": "uniqueid" },
            { "sWidth": "15%", "sType": "string", "mData": "clid" },
            { "sWidth": "15%", "sType": "string", "mData": "lastapp" },
            { "sWidth": "15%", "sType": "string", "mData": "dst" },
            { "sWidth": "15%", "sType": "string", "mData": "disposition" },
            { "sWidth": "15%", "sType": "string", "mData": "duration_in_mins_and_secs" }, ],
        "iDisplayLength": 20,
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": '<"H"Tr>t<"F"ip>',
        "oTableTools": {
            "sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "collection",
                    "sButtonText": "Export",
                    "aButtons": ["csv", "xls", "pdf"]
                }]
        }
    }).columnFilter({
        aoColumns: [ 
                { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
                { type: "text" },
                 null,
                { type: "number" },
                { type: "select", values: [ 'A', 'C', 'U', 'X']  },
                null,
                null,
                null
        ]

    });

Like i said it applies then is gone once the table fully initializes.

On my main page

    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/table.css">
    <link rel="stylesheet" href="/css/layout.css">

    <script type="text/javascript" charset="utf-8" src="/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/jquery-ui.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/userdblist.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/jquerymask.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/columnFilter.js"></script>

I have the table php included into my main page with these

    <link type="text/css" rel="stylesheet" href="/DataTables/media/css/smoothness/jquery-ui-1.10.3.custom.css"/>
    <link type="text/css" rel="stylesheet" href="/DataTables/media/css/jquery.dataTables_themeroller.css"/>
    <link type="text/css" rel="stylesheet" href="/DataTables/media/css/demo_table_jui.css" />
    <link type="text/css" rel="stylesheet" href="/DataTables/extras/TableTools/media/css/TableTools.css" />

    <script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/DataTables/extras/TableTools/media/js/TableTools.js"></script>
    <script type="text/javascript" charset="utf-8" src="/DataTables/extras/TableTools/media/js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="/js/search.js"></script>

I am also wanting the inputs to be at the top but that is another issue ill work on. Thank you for any help.

Upvotes: 3

Views: 8836

Answers (2)

user1552172
user1552172

Reputation: 676

It does not show up with "sScrollY" enabled on the datatable.

Upvotes: 1

Daiku
Daiku

Reputation: 1227

Not sure why the column filters don't show at all. Perhaps because you defined 8 of them, but the rest of your table has 7 columns?

To get the column filter inputs to the top, you need to move your second group of column headers from the tfoot section to the thead section: 

         <thead>
             <tr>
                 <th>Call Date</th>
                 <th>Unique ID</th>
                 <th>Source</th>
                 <th>App</th>
                 <th>Destination</th>
                 <th>Disposition</th>
                 <th>Duration</th>          
             </tr> 
             <tr>
                <th>Call Date</th>
                <th>Unique ID</th>
                <th>Source</th>
                <th>App</th>
                <th>Destination</th>
                <th>Disposition</th>
                <th>Duration</th>    
            </tr>
         </thead>
         <tbody>....

You also need to add sPlaceHolder as you set up columnFilter:

}).columnFilter({
    sPlaceHolder: "head:after",
    aoColumns: [ ...

Not sure what the capital T in your sDom represents. Do you want l or f?

Upvotes: 4

Related Questions