Title: Column Filtering
Last modified: August 21, 2016

---

# Column Filtering

 *  Resolved [fonzarelli](https://wordpress.org/support/users/fonzarelli/)
 * (@fonzarelli)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/)
 * Hello,
 * I’ve had a request from my client to try and enable the column filtering option
   available, for which I downloaded the DataTables Column Filter extension. Having
   configured it as specified, the feature does not seem to work. I also noticed
   that features such as search, sorting and pagination do not show up:
 * [http://www.visual-data.com/?page_id=11](http://www.visual-data.com/?page_id=11)
 * In a recent thread, you mentioned in the FAQ section of your site that it’s probably
   a JavaScript issue. The site was developed using a customized template, however
   I fear that it was not coded well and the developers are no longer reachable.
 * I’ve examined the code through the view source option you recommended and tried
   locating lines with the <script> tags, however I’m not sure which lines need 
   addressing? I’m just worried any changes might affect the gallery slider at the
   top and the roundabout feature on the home page.
 * I would be grateful for any suggestions!
 * Header.php attached:
 *     ```
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
       <html xmlns="http://www.w3.org/1999/xhtml">
   
       <head>
   
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
       <title>Visual Data </title>
   
       <link href="<?php bloginfo('template_url');?>/CSS/user-style2.css" type="text/css" rel="stylesheet" />
   
       <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
       <link href="<?php bloginfo('template_url');?>/CSS/user-style.css" rel="stylesheet" type="text/css" />
   
       <script src="<?php bloginfo('template_url');?>/js/jquery-1.7.1.min.js" type="text/javascript"></script>
       <script src="<?php bloginfo('template_url');?>/js/jquery-ui-1.8.16.custom.mins.js" type="text/javascript"></script>
       <script src="<?php bloginfo('template_url');?>/js/allinone_carousels.js" type="text/javascript"></script>
   
       <!--[if IE]><script src="<?php bloginfo('template_url');?>/js/excanvas.compileds.js" type="text/javascript"></script><![endif]-->
       <!-- must have -->
       <script src="<?php bloginfo('template_url');?>/js/prototypes.js" type="text/javascript"></script>
       <script src="<?php bloginfo('template_url');?>/js/scriptaculouss.js" type="text/javascript"></script>
       <script src="<?php bloginfo('template_url');?>/js/lightboxs.js" type="text/javascript"></script>
   
       <!-- must have -->
       <script type="text/javascript">
       function clearText(field){
           if (field.defaultValue == field.value) field.value = '';
   
           else if (field.value == '') field.value = field.defaultValue;
       }
       </script>
   
       <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
   
       <script src="<?php bloginfo('template_url');?>/src/skdslider.js"></script>
       <link href="<?php bloginfo('template_url');?>/src/skdslider.css" rel="stylesheet">
       <script type="text/javascript">
       		jQuery(document).ready(function(){
       			jQuery('#demo').skdslider({'delay':5000, 'fadeSpeed': 2000,'showNextPrev':true,'showPlayButton':true,'autoStart':false});
       		});
       </script><link rel="stylesheet" href="<?php bloginfo('template_url');?>/CSS/style.css" media="screen">
       <link rel='stylesheet' id='tablepress-default-css' href='http://www.visualdataindustrial.com/wp-content/tablepress-combined.min.css?ver=2' type='text/css' media='all'/>
       </style>
       </head>
       <body>
   
       <div id="header-bg">
   
       	<div id="header-inner">
   
           	<div id="header">
   
               	<div class="main-menu">
   
                   	<?php wp_nav_menu( array( 'theme_location' => 'header_menu','container' => '','menu_id' => '' ,'menu_class' => '' ) ); ?>
   
                   </div>
   
                    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("header area") ) : ?><?php endif; ?>
   
               </div>
   
           </div>
   
           <div id="demo" class="skdslider">
       <ul>
       <li>
       <img src="wp-content/uploads/2013/11/Control-Room.jpg" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>Surveillance Solutions</h2>
       		<p>When it comes to surveillance, we've got you covered.</p>
         </div>
       </li>
       <li>
       <img src="wp-content/uploads/2013/11/University-Campus.jpg" alt="img" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>University Surveillance</h2>
       		<p>We provide camera systems for university campuses.</p>
         </div>
       </li>
       <li>
       <img src="wp-content/uploads/2013/11/Server.jpg" alt="img" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>Storage Servers</h2>
       		<p>We offer top-of-the line video storage servers.</p>
         </div>
       </li>
       <li>
       <img src="wp-content/uploads/2013/11/Camera.jpg" alt="img" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>City Wide Surveillance</h2>
       		<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here.</p>
         </div>
       </li>
       <li>
       <img src="wp-content/uploads/2013/11/Shopping-Mall.jpg" alt="img" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>Retail Settings</h2>
       		<p>Our surveillance solutions are perfect for the retail setting.</p>
         </div>
       </li>
       </ul>
       </div>
   
       </div>
       ```
   
 * [http://wordpress.org/plugins/tablepress/](http://wordpress.org/plugins/tablepress/)

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385286)
 * Hi,
 * thanks for your post, and sorry for the trouble.
 * Is this really the “header.php”? I’m surprised that there’s a hard-coded line
   for the TablePress CSS in there…
 * Regardless, the problem comes from the JS loading. Your theme is loading a custom
   and outdated version of jQuery (in the line
 *     ```
       <script src="<?php bloginfo('template_url');?>/js/jquery-1.7.1.min.js" type="text/javascript"></script>
       ```
   
 * ). That is wrong and should be removed. Instead, the theme should use the version
   of jQuery that comes with WordPress.
    Then, the theme also tries to load a second
   copy of jQuery from the Google CDN (but that has a typo in the URL). That seems
   to be in the “footer.php”. Additionally, the “footer.php” does not seem to have
   a call to the `wp_footer();` before the closing `</body>` HTML tag.
 * So, in summary, there are indeed several bad mistakes in this theme, that cause
   all kind of problems. I’m sorry to say it, but if you can’t reach the theme developer,
   you should think about switching to a new and working theme… (or get someone 
   to fix your theme…).
 * Regards,
    Tobias
 *  Thread Starter [fonzarelli](https://wordpress.org/support/users/fonzarelli/)
 * (@fonzarelli)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385290)
 * Many thanks for getting back to me.
 * The hard-coded line for TablePress css was to fix an issue with the table format
   when it would appear on the front-end. The table would appear with no borders
   and there were alignment issues with the data in the columns. After adding the
   line, it fixed the format issue.
 * The whole theme is customized to the client’s requirements, however I had no 
   idea it was this badly coded, and getting hold of the developers will be very
   difficult…it would be near impossible to start over at this point.
 * Would you explicitly need to state for the theme to use the version of JQuery
   that comes with WordPress, or is it automatically picked up?
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385291)
 * Hi,
 * ah, ok. Thanks for the clarification! That then means that the theme is also 
   missing the `wp_head();` call before the closing `</head>` HTML tag.
 * If you add that and the mentioned `wp_footer();` footer call, everything should
   be added automatically, without any hard coding.
 * Regards,
    Tobias
 *  Thread Starter [fonzarelli](https://wordpress.org/support/users/fonzarelli/)
 * (@fonzarelli)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385294)
 * Hi there,
 * Just as you suggested, the codex site explains adding the following in the header.
   php file, just before </head> tag:
 *     ```
       <?php
        ...
           /* Always have wp_head() just before the closing </head>
            * tag of your theme, or you will break many plugins, which
            * generally use this hook to add elements to <head> such
            * as styles, scripts, and meta tags.
            */
           wp_head();
        ?>
       ```
   
 * and in the footer.php file, just before </body> tag:
 *     ```
       <?php
          /* Always have wp_footer() just before the closing </body>
           * tag of your theme, or you will break many plugins, which
           * generally use this hook to reference JavaScript files.
           */
           wp_footer();
       ?>
       ```
   
 * I also commented out the following in the header.php file:
 *     ```
       <!--script src="<?php bloginfo('template_url');?>/js/jquery-1.7.1.min.js" type="text/javascript"></script>-->
       <!--script src="<?php bloginfo('template_url');?>/js/jquery-ui-1.8.16.custom.mins.js" type="text/javascript"></script>-->
       ```
   
 * Which, just brings back the following error:
 * > Parse error: syntax error, unexpected ‘.’ in /home/allegro_feroz/visual-data.
   > com/wp-content/themes/vd/header.php on line 51
 * I guess there is more to it than just including the wp_head() and wp_footer()
   calls? Sorry if I sound like a beginner in this, because I pretty much am…
 * _[Moderator Note: Please post code & markup between backticks or use the code
   button. Your posted code may now have been permanently damaged by the forum’s
   parser.]_
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385296)
 * Hi,
 * nope, that’s just a plain PHP error.
    The
 *     ```
       ...
       ```
   
 * after the
 *     ```
       <?php
       ```
   
 * need to be removed.
 * Regards,
    Tobias
 *  Thread Starter [fonzarelli](https://wordpress.org/support/users/fonzarelli/)
 * (@fonzarelli)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385297)
 * Many thanks and apologies for not laying out the code correctly in my previous
   post.
 * If the home page appears in the following manner, in your opinion, do you think
   there is a major issue that needs to be addressed with the theme?
 * [http://www.visual-data.com/](http://www.visual-data.com/)
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385298)
 * Hi,
 * the problem seem to be the many files that are not found (which you can see in
   the error log console of the browser). In most names, there seems to be an “s”
   to much.
    Due to the missing JS files, the scripts are then not run, which creates
   that weird layout.
 * Regards,
    Tobias
 *  Thread Starter [fonzarelli](https://wordpress.org/support/users/fonzarelli/)
 * (@fonzarelli)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385398)
 * You’re a star! I am extremely grateful for all your help…you were absolutely 
   right about the issue you mentioned.
 * I had a developer friend of mine who had a look at the code behind the theme.
   The wp_head() and wp_footer() calls were missing…also some of the JS files had
   been renamed (probably for testing purposes), but the changes were not reverted
   after the testing had been completed.
 * The wp_footer() call was placed where you suggested, however the wp_head() call
   had to be made further up and we commented out the version of the JQuery library
   call just beneath it to get it all working. I guess the wp_head() call is not
   placed where it’s supposed to be, but everything is working, including features
   in other plug-ins that previously didn’t work…Thanks again!
 *     ```
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
       <html xmlns="http://www.w3.org/1999/xhtml">
   
       <head>
   
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
       <title>Visual Data </title>
   
       <link href="<?php bloginfo('template_url');?>/CSS/user-style2.css" type="text/css" rel="stylesheet" />
   
       <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
       <link href="<?php bloginfo('template_url');?>/CSS/user-style.css" rel="stylesheet" type="text/css" />
   
       <?php wp_head(); ?>
   
       <!--script src="<?php bloginfo('template_url');?>/js/jquery-1.7.1.min.js" type="text/javascript"></script -->
       <script src="<?php bloginfo('template_url');?>/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
       <script src="<?php bloginfo('template_url');?>/js/allinone_carousel.js" type="text/javascript"></script>
   
       <!--[if IE]><script src="<?php bloginfo('template_url');?>/js/excanvas.compiled.js" type="text/javascript"></script><![endif]-->
       <!-- must have -->
       <script src="<?php bloginfo('template_url');?>/js/prototype.js" type="text/javascript"></script>
       <script src="<?php bloginfo('template_url');?>/js/scriptaculous.js" type="text/javascript"></script>
       <script src="<?php bloginfo('template_url');?>/js/lightbox.js" type="text/javascript"></script>
   
       <!-- must have -->
       <script type="text/javascript">
       function clearText(field){
           if (field.defaultValue == field.value) field.value = '';
   
           else if (field.value == '') field.value = field.defaultValue;
       }
       </script>
   
       <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
   
       <script src="<?php bloginfo('template_url');?>/src/skdslider.js"></script>
       <link href="<?php bloginfo('template_url');?>/src/skdslider.css" rel="stylesheet">
       <script type="text/javascript">
       		jQuery(document).ready(function(){
       			jQuery('#demo').skdslider({'delay':5000, 'fadeSpeed': 2000,'showNextPrev':true,'showPlayButton':true,'autoStart':false});
       		});
       </script><link rel="stylesheet" href="<?php bloginfo('template_url');?>/CSS/style.css" media="screen">
       <link rel='stylesheet' id='tablepress-default-css' href='http://www.visualdataindustrial.com/wp-content/tablepress-combined.min.css?ver=2' type='text/css' media='all'/>
       </style>
   
       </head>
       <body>
   
       <div id="header-bg">
   
       	<div id="header-inner">
   
           	<div id="header">
   
               	<div class="main-menu">
   
                   	<?php wp_nav_menu( array( 'theme_location' => 'header_menu','container' => '','menu_id' => '' ,'menu_class' => '' ) ); ?>
   
                   </div>
   
                    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("header area") ) : ?><?php endif; ?>
   
               </div>
   
           </div>
   
           <div id="demo" class="skdslider">
       <ul>
       <li>
       <img src="wp-content/uploads/2013/11/Control-Room.jpg" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>Surveillance Solutions</h2>
       		<p>When it comes to surveillance, we've got you covered.</p>
         </div>
       </li>
       <li>
       <img src="wp-content/uploads/2013/11/University-Campus.jpg" alt="img" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>University Surveillance</h2>
       		<p>We provide camera systems for university campuses.</p>
         </div>
       </li>
       <li>
       <img src="wp-content/uploads/2013/11/Server.jpg" alt="img" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>Storage Servers</h2>
       		<p>We offer top-of-the line video storage servers.</p>
         </div>
       </li>
       <li>
       <img src="wp-content/uploads/2013/11/Camera.jpg" alt="img" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>City Wide Surveillance</h2>
       		<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here.</p>
         </div>
       </li>
       <li>
       <img src="wp-content/uploads/2013/11/Shopping-Mall.jpg" alt="img" />
       <!--Slider Description example-->
        <div class="slide-desc">
       		<h2>Retail Settings</h2>
       		<p>Our surveillance solutions are perfect for the retail setting.</p>
         </div>
       </li>
       </ul>
       </div>
   
       </div>
       ```
   
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385399)
 * Hi,
 * no problem, you are very welcome! 🙂 Good to hear that this helped!
 * One more thing: You can now also remove the manual CSS line for TablePress, as
   that will be registered through `wp_head()` automatically.
 * Best wishes,
    Tobias
 * P.S.: In case you haven’t, please [rate TablePress](http://wordpress.org/support/view/plugin-reviews/tablepress)
   here in the plugin directory. Thanks!
 *  Thread Starter [fonzarelli](https://wordpress.org/support/users/fonzarelli/)
 * (@fonzarelli)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385400)
 * I would be more than happy to…the plug-in works great.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385401)
 * Hi,
 * thanks, I really appreciate it!
 * Regards,
    Tobias

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Column Filtering’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * 11 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/column-filtering/#post-4385401)
 * Status: resolved