แบบนี้ทำยังไงหรอครับเกี่ยวกับ 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>



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

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

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


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


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

 ความคิดเห็นที่ 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อ่าน 5,355
ninenik 27.55.68.xxx 14-07-2020
 ความคิดเห็นที่ 2
ขอบคุณครับพี่ แต่ลองก๊อปไปแล้วไม่ได้อะครับ ผมขอดูโค๊ดทาง าฃhtmlหน่อยได้มั้ยครับ


ฑีฆาวุฒิ ปิติวงศ์หิรัญกุล 171.99.155.xxx 16-07-2020 22:28
 ความคิดเห็นที่ 3
คลิกขวาที่ iframe demo ดูตัวอย่างได้เลย



ninenik 223.24.167.xxx 17-07-2020
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ