แบบนี้ทำยังไงหรอครับเกี่ยวกับ data table

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา แบบนี้ทำยังไงหรอครับเกี่ยวกับ data table

แบบนี้ทำยังไงหรอครับเกี่ยวกับ data table

แบบนี้ทำยังไงหรอคับ datatable คือผมทำ datatable ได้แล้ว แต่ต้องการให้ซ่อนข้อมูลก่อนอะครับ พอพิมพ์หรือค้นหาในช่องว่างค่อยแสดง

<?php



if(isset($_POST['search']))

{

    $valueToSearch = $_POST['valueToSearch'];

    // search in all table columns

    // using concat mysql function

    $query = "SELECT * FROM `keeps` WHERE CONCAT(`id`, `tname`, `brand`, `gen`, `sid`, `depart`, `position`, `date` ) LIKE '%".$valueToSearch."%'";

    $search_result = filterTable($query);

    

}

 else {

    $query = "SELECT * FROM `keeps`";

    $search_result = filterTable($query);

}



// function to connect and execute the query

function filterTable($query)

{

    $connect = mysqli_connect("localhost", " ", " ", " ");

    $filter_Result = mysqli_query($connect, $query);

    return $filter_Result;

}



?>



<!DOCTYPE html>

<html>

    <head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">



    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.bootstrap4.min.css">



    <link href="https://fonts.googleapis.com/css2?family=Sarabun&display=swap" rel="stylesheet">



    <title>SEARCH TOOL</title>

    

    </head>

    <style>

    body, p, h1 {

        font-family: 'Sarabun', sans-serif;

    }

    </style>

    <body>

    <div class="container-fluid">

    <br>

    <br>

    <br>

    <br>

    <h1 style="text-align: center; font-size:22px;">ค้นหาอุปกรณ์ทางการแพทย์</h1>

    

            

            <table id="myTable" class="table table-striped table-bordered" style="width:100%">

            <thead>

                <tr>

                    <th>ลำดับ</th>

                    <th>ชื่อเครื่องมือ</th>

                    <th>ยี่ห้อ</th>

                    <th>รุ่น</th>

                    <th>รหัสครุภัณฑ์</th>

                    <th>อยู่ที่แผนก</th>

                    <th>ตำแหน่งปัจจุบัน</th>

                    <th>วันและเวลา</th>

                </tr>

                </thead>

                <tbody>



      <!-- populate table from mysql database -->

                <?php while($row = mysqli_fetch_array($search_result)):?>

                <tr>

                    <td><?php echo $row['id'];?></td>

                    <td><?php echo $row['tname'];?></td>

                    <td><?php echo $row['brand'];?></td>

                    <td><?php echo $row['gen'];?></td>

                    <td><?php echo $row['sid'];?></td>

                    <td><?php echo $row['depart'];?></td>

                    <td><?php echo $row['position'];?></td>

                    <td><?php echo $row['date'];?></td>

                </tr>

                <?php endwhile;?>

                </tbody>

            </table>

        </form>

        </div>

            <!-- Latest compiled and minified JavaScript -->

            <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<script src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>

<script src="https://cdn.datatables.net/responsive/2.2.4/js/responsive.bootstrap4.min.js"></script>







<script type="text/javascript">

$(document).ready(function() {

    $('#myTable').DataTable();

} );

</script>

        

    </body>

</html>

ฑีฆาวุฒิ ปิติวงศ์หิรัญกุล 14-07-2020 19:10:12

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ตามรูปแบบทั่วไป ไม่สามารถทำได้ นอกจากว่าจะไปใช้เป็นแบบ server side

แล้วใช้วิธเช็ค กรณีที่มีการส่งค่าไปเท่านั้น จึงจะส่งข้อมูลมาแสดง หรือถ้าอยากประยุกต์จริงๆ
ก็อาจจะใช้วิธีส่งค่าค้นหาเริ่มต้นไป ประมาณนี้

$(document).ready(function() {
  
  $('#example').DataTable().search("_").draw();

});

ซึ่งก็เหมือนกับเราส่งค่า ที่ไม่มีในข้อมูลไปค้น ก็จะไม่แสดงค่าอะไรออกมา

แต่พอเราลบค่านั้นออก ข้อมูลก็จะแสดงปกติ เหมือนเดิม

อีกวิธี ใช้วิธีการซ่อน แท็ก tbody ของตารางไปก่อน เมื่อสร้าง datatable แล้ว จากนั้นใช้วิธีการตรวจจับ การพิมพ์ในช่องค้นหา
ถ้ามีข้อมูลส่งไปค้นหาให้แสดง tbody

$(document).ready(function() {
  
  $('#example').DataTable();
  $(".dataTable tbody").hide(); // ซ่อนไปก่อน
  
  // ตรวจจับการพิมพ์ค้นหา
  $('.dataTables_filter input[type=search]').on( 'keyup click', function () {
    if($(this).val().length>0){
      $(".dataTable tbody").show();
    }else{
      $(".dataTable tbody").hide();
    }
  });

});

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
ใช้งาน Server side processing สำหรับ DataTable ร่วมกับ Codeigniter ตอนที่ 3	อ่าน 12,604

ninenik 14-07-2020

ความคิดเห็นที่ 2

ขอบคุณครับพี่ แต่ลองก๊อปไปแล้วไม่ได้อะครับ ผมขอดูโค๊ดทาง าฃhtmlหน่อยได้มั้ยครับ

ฑีฆาวุฒิ ปิติวงศ์หิรัญกุล 16-07-2020 22:28

ความคิดเห็นที่ 3

คลิกขวาที่ iframe demo ดูตัวอย่างได้เลย

ninenik 17-07-2020

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน