[DATATABLE] bộ lọc sử dụng các thẻ bên trong td matter.vn (ok)

Theo mặc định search tìm kiếm các text bên trong thẻ td

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Gutener
 */
get_header();
?>
<div id="content" class="site-content site-content--document">
  <div class="document-project">
    <div class="document-project__document">
      <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
        <span property="itemListElement" typeof="ListItem">
          <a property="item" typeof="WebPage" title="Go to Matter Việt Nam." href="<?php echo site_url('/'); ?>" class="home">
            <span property="name">Trang chủ</span>
            <i class="fas fa-angle-right"></i>
          </a>
          <a property="item" typeof="WebPage" title="Go to Matter Việt Nam." href="javascript:void(0)" class="home">
            <span property="name">Tài nguyên</span>
            <i class="fas fa-angle-right"></i>
          </a>
          <span property="itemListElement" typeof="ListItem">
            <span property="name" class="archive taxonomy category current-item" id="generalN">Tài Liệu</span>
            <meta property="url" content="<?php echo site_url('/trang-tai-lieu'); ?>">
            <meta property="position" content="3">
          </span>
        </span>
        <h2>Tài Liệu</h2>
      </div>
    </div>
  </div>
  <div class="container">
    <section class="section-post-area">
      <div class="row d-block">
        <div id="primary" class="content-area  col-12 col-md-12 col-sm-12">
          <div class="row d-block">
            <div class="document-content">
              <div id="searchReal">
                <input type="text" placeholder="Vui lòng nhập thông tin cần tìm" id="myInputTextField">
                <i class="fas fa-search"></i>
              </div>
              <table id="document" class="document display" style="width: 100%">
                <thead style="display: none;">
                  <tr>
                    <th>Software</th>
                  </tr>
                </thead>
                <tbody>
                  <?php
                  $query = new WP_Query(array(
                    'posts_per_page'      => -1,
                    'post_type'           => 'post',
                    'post_status'         => 'publish',
                    'cat'                 => 64
                  ));
                  $posts_array = $query->get_posts();
                  $datas = array();
                  $show_latest_posts = count($posts_array) > 0;
                  if ($query->have_posts()) :
                    while ($query->have_posts()) :
                      $query->the_post();
                  ?>
                      <tr>
                        <td>
                          <div class="document__cate"><?php echo get_field('cate'); ?></div>
                          <h2 class="document__title"><?php echo get_the_title(); ?></h2>
                          <div class="document__content">
                            <div class="document__date"><?php echo get_field('date'); ?></div>
                            <div class="document__down">
                              <img src="<?php echo get_stylesheet_directory_uri() . '/assets/images/download.png'; ?>" alt="download.png">
                              <a href="<?php echo get_field('file'); ?>" download>Tải về</a>
                            </div>
                          </div>
                        </td>
                      </tr>
                  <?php
                    endwhile;
                  endif;
                  wp_reset_postdata();
                  ?>
                </tbody>
              </table>
            </div>
          </div>
        </div><!-- #primary -->
      </div>
    </section>
    <script type="text/javascript">
      jQuery(document).ready(function($) {
        oTable = $('#document').DataTable({
          dom: 'rtip',
          ordering: false,
          info: false,
          pageLength: 9,
          responsive: true,
          language: {
            oPaginate: {
              sNext: '<i class="fas fa-angle-right"></i>',
              sPrevious: '<i class="fas fa-angle-left"></i>',
              sFirst: '<i class="fa fa-step-backward"></i>',
              sLast: '<i class="fa fa-step-forward"></i>'
            }
          }  
        });
        $('#myInputTextField').keyup(function() {
          oTable.search($(this).val()).draw();
        })
      });
    </script>
  </div>
</div>
<?php
get_footer();
add_action('wp_enqueue_scripts', 'add_theme_scripts', 99);
function add_theme_scripts()
{
  if (is_page('trang-tai-lieu')) {
    wp_enqueue_script('dataTablesjs', 'https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js', array('styleathomejs'),  wp_generate_uuid4(), 'all');
  }
  wp_localize_script(
    'styleathomejs',
    'frontend_ajax_object',
    array(
      'ajaxurl'   => admin_url('admin-ajax.php'),
      'ajaxnonce' => wp_create_nonce('ajaxnonce'),
    )
  );
}

Last updated

Navigation

Lionel

@Copyright 2023