Column Filtering

Resolved

(@fonzarelli)

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

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/

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

Plugin Author TobiasBg
(@tobiasbg)

10 years, 4 months ago
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
(@fonzarelli)

10 years, 4 months ago

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 TobiasBg
(@tobiasbg)

10 years, 4 months ago

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
(@fonzarelli)

10 years, 4 months ago
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:
```


```
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 TobiasBg
(@tobiasbg)

10 years, 4 months ago
Hi,

nope, that’s just a plain PHP error.
The
```
...
```
after the
```
<?php
```
need to be removed.

Regards,
Tobias
Thread Starter fonzarelli
(@fonzarelli)

10 years, 4 months ago

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/

Plugin Author TobiasBg
(@tobiasbg)

10 years, 4 months ago

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
(@fonzarelli)

10 years, 4 months ago
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-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>



<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>


<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" />

 <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" />

 <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" />

 <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" />

 <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" />

 <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 TobiasBg
(@tobiasbg)

10 years, 4 months ago

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 here in the plugin directory. Thanks!

Thread Starter fonzarelli
(@fonzarelli)

10 years, 4 months ago

I would be more than happy to…the plug-in works great.

Plugin Author TobiasBg
(@tobiasbg)

10 years, 4 months ago

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.

Tags