01.<style>
02. * {
03. padding: 0;
04. margin: 0;
05. box-sizing: border-box;
06.}
07.
08..select_data {
09. width: 20em !important;
10. margin-left: auto;
11.}
12.
13..table-data th {
14. width: 20%;
15. text-align: center;
16.}
17.</style>
18.<!DOCTYPE html>
19.<html lang="en">
20.<head>
21. <meta charset="UTF-8">
22. <meta http-equiv="X-UA-Compatible" content="IE=edge">
23. <meta name="viewport" content="width=device-width, initial-scale=1.0">
24. <title>Example</title>
25.
26. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">28. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>29. <?php include('db_connect.php') ?>
30.</head>
31.
32.<div class="container mt-5">
33. <div class="row">
34. <select class="form-select select_data" id="select_data">
35. <option value="0" selected >ข้อมูลแผนก</option>
36. <?php $sql = "SELECT DISTINCT department FROM data_user ORDER BY id ASC";
37. $result = mysqli_query($con, $sql);
38. $num_row = mysqli_num_rows($result);
39. while ($row = mysqli_fetch_assoc($result))
40. { ?>
41. <option value="<?php echo $row['department'];?>"><?php echo $row['department']; ?></option>
42. <?php } ?>
43. </select>
44.
45. <table class="table table-striped table-bordered mt-3 table-data">
46. <thead>
47. <tr class="table-primary">
48. <th>ลำดับ</th>
49. <th>ชื่อ</th>
50. <th>จังหวัด</th>
51. <th>เบอร์</th>
52. <th>แผนก</th>
53. </tr>
54. </thead>
55. <tbody id="table-body">
56.
57. </tbody>
58. </table>
59. </div>
60. </div>
61. <script>
62.jQuery(function($) {
63.
64.data_ajax(0);
65.
66.$("#select_data").change(function() {
67. var select_data = $(this).val();
68. data_ajax(select_data);
69.});
70.
71.});
72.
73.function data_ajax(data) {
74.$.ajax({
75. url: "ajax-php.php",
76. type: "POST" ,
77. dataType: "json",
78. data: {data_id : data},
79. success: function(data){
80. $("#table-body").empty();
81. console.log(data);
82. $.each(data, function(index, record) {
83. var row = $("<tr></tr>");
84. var cell1 = $("<td class=\"text-center\">" + record.id + "</td>");
85. var cell2 = $("<td>" + record.username + "</td>");
86. var cell3 = $("<td>" + record.province + "</td>");
87. var cell4 = $("<td>" + record.phone_number + "</td>");
88. var cell5 = $("<td>" + record.department + "</td>");
89. row.append(cell1, cell2, cell3,cell4, cell5);
90. $("#table-body").append(row);
91. });
92.
93. }
94. });
95.}
96. </script>
