IT Blog

  • Blog
  • Technology
    • Architecture
    • CMS
    • CRM
    • Web
    • DotNET
    • Python
    • Database
    • BI
    • Program Language
  • Users
    • Login
    • Register
    • Forgot Password?
  • ENEN
    • 中文中文
    • ENEN
Experience IT
In a World of Technology, People Make the Difference.
  1. 首页
  2. Technology
  3. Web
  4. JavaScript
  5. 正文

Show any data in DataTables in WordPress

2019-01-08 533点热度 0人点赞 0条评论
Loading...

There are many way to show data in jQuery DataTables. Here’s a way using shortcode.

Create a plugin with shortcode.

1. Create a function

Pseudo function:

function get_something_shortcode(){
    global $wpdb;

    $sql = "select * from table";
    $result = $wpdb->get_results($sql);

    $str = '<table id="logTable">';
    $str .= '<thead><tr><th>column1</th><th>column1</th></tr></thead>';
    $str .= '<tbody>';

    foreach($result as $row) {
        $str .= '<tr><td>'.$row->column1.'</td><td>'.$row->column2.'</td></tr>';
    }
    $str.="</tbody></table>";
    return $str;
}

Real function

function get_activity_logs_shortcode(){
    global $wpdb;
    $sql = "select DATE_FORMAT(convert_tz(l.visit_date,'+0:00','-5:00'), '%y-%m-%d %h:%i:%s')
 AS `date`,p.post_title,p.post_type,pu.display_name AS author,(case when l.display_name='unknown' then '-' else l.display_name end) AS user,l.status ,l.user_ip,l.city,l.referer
from wp_moove_activity_log l join wp_posts p on p.ID = l.post_id
join wp_users pu on pu.ID = p.post_author
left join wp_users u on u.ID = l.user_id
where p.post_type in ('page','post') and l.user_ip not LIKE '66.249.75.%' AND l.user_ip not LIKE '66.249.69.%' and l.display_name!='太极客'
order by l.visit_date desc";
    $result = $wpdb->get_results($sql);

    $str='<table id="logTable" style="font-size:12px">';
        $str .= '<thead><tr><th>Date/Time</th><th>Title</th><th>Post type</th><th>Author</th><th>User</th><th>Activity</th><th>Client IP</th><th>Client Location</th><th>Referer</th></tr></thead>';
        $str .= '<tbody>';

    foreach($result as $row) {
        $str .= '<tr><td><a href="'.$row->Date.'" nowrap style="font-size:10px;white-space:nowrap">'.$row->date.'</td><td>'.$row->post_title.'</td><td>'.$row->post_type.'</td><td>'.$row->author.'</td><td>'.$row->user.'</td><td>'.$row->status.'</td><td>'.$row->user_ip.'</td><td>'.$row->city.'</td><td>'.$row->referer.'</td></tr>';
    }
    $str.="</tbody></table>";
    return $str;
}

2. Make it a shortcode

add_shortcode('activity_logs','get_activity_logs_shortcode');

Add following code in head section in header.php file of the child theme.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#logTable').DataTable( {
        "initComplete": function(settings, json) {
            var obj = $('#memberTable_filter label');
            obj.html(obj.html().replace('Search:','搜索: '));

            obj = $('.dataTables_length label');
            obj.html(obj.html().replace('Show','显示 ').replace('entries',' 行'));
        },
        "pageLength": 50
    } );
} );
</script>

Note table the table id logTable must be the same in the table and script.

3. Add a page to use the shortcode, then save and display the page.

[activity_logs]

Done.

error
fb-share-icon
Tweet
fb-share-icon
IT Team
Author: IT Team

Loading...
标签: Blog
最后更新:2019-01-08

IT Team

stay absorbed stay excellent

点赞
< 上一篇
下一篇 >

文章评论

取消回复
最新 热点 随机
最新 热点 随机
Controling Category List on Sidebar Widget Restoring the Links Manager Adding reCaptcha for user forms in WordPress Scheduling Background Job in WordPress WordPress database access with $wpdb CSS Tricks
Scheduling Background Job in WordPressRestoring the Links Manager恢复链接管理器AdSense合规指南Controling Category List on Sidebar WidgetAdding reCaptcha for user forms in WordPress
Install sample data for Dynamic 365 trial Event Calendar got 500 error Data Warehouse SCD Types and their queries Scientific format problem Controlling sidebar hide/show on post JQuery this,$(this),$this,$()
Categories
  • Architecture
  • BI
  • C#
  • CSS
  • Database
  • Digital Marketing
  • DotNET
  • Hosting
  • HTML
  • JavaScript
  • PHP
  • Program Language
  • Python
  • Security
  • SEO
  • Technology
  • Web
  • Wordpress

COPYRIGHT © 2021 Hostlike IT Blog. All rights reserved.