Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,028

HOME > PHP > PHP Forum > การดึงข้อมูลมาแสดงตามเงื่อนไขของ checkbox โดยใช้หน้าเดิม แสดง

การดึงข้อมูลมาแสดงตามเงื่อนไขของ checkbox โดยใช้หน้าเดิม แสดง

เริ่มหัวข้อใหม่

tharakorn

โพสกระทู้ ( 27 )
บทความ ( 0 )

จากรูปหากต้องการนำข้อมูลมาแสดงตาม checkbox ที่เลือกโดยให้แสดงข้อมูลหน้า page เดิมต้องเขียน code แบบไหนครับ

Code (PHP)

<?php
include('db_connect.php');

$query=mysqli_query($con,"SELECT * FROM tb_borrow ORDER BY id DESC");
	$row = mysqli_fetch_row($query);
	$rows = $row[0];
	$page_rows = 6;  //จำนวนข้อมูลที่ต้องการให้แสดงใน 1 หน้า  ตย. 5 record / หน้า 
	$last = ceil($rows/$page_rows);

	if($last < 1){
		$last = 1;
	}

	$pagenum = 1;

	if(isset($_GET['pn'])){
		$pagenum = preg_replace('#[^0-9]#', '', $_GET['pn']);
	}

	if ($pagenum < 1) {
		$pagenum = 1;
	}
	else if ($pagenum > $last) {
		$pagenum = $last;
	}

	$limit = 'LIMIT ' .($pagenum - 1) * $page_rows .',' .$page_rows;
	$nquery=mysqli_query($con,"SELECT * from  tb_borrow ORDER BY id DESC $limit ");
	$paginationCtrls = '';

	if($last != 1){

	if ($pagenum > 1) {
    $previous = $pagenum - 1;
	$paginationCtrls .= '<a href="'.$_SERVER['PHP_SELF'].'?pn='.$previous.'" class="btn btn-info">Previous</a> &nbsp; &nbsp; ';

	for($i = $pagenum-4; $i < $pagenum; $i++){
	if($i > 0){
	$paginationCtrls .= '<a href="'.$_SERVER['PHP_SELF'].'?pn='.$i.'" class="btn btn-primary">'.$i.'</a> &nbsp; ';
			}
	}
}

	$paginationCtrls .= ''.$pagenum.' &nbsp; ';

	for($i = $pagenum+1; $i <= $last; $i++){
		$paginationCtrls .= '<a href="'.$_SERVER['PHP_SELF'].'?pn='.$i.'" class="btn btn-primary">'.$i.'</a> &nbsp; ';
		if($i >= $pagenum+4){
			break;
		}
	}

    if ($pagenum != $last) {
    $next = $pagenum + 1;
    $paginationCtrls .= ' &nbsp; &nbsp; <a href="'.$_SERVER['PHP_SELF'].'?pn='.$next.'" class="btn btn-info">Next</a> ';
    }
        }
    ?>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

body {
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #F2F3F4;
    color: #273746;
}

.container {
    margin: 5px auto;
    padding: 0;
    width: 90%;
    
}

table {
    width: 100%;
    /* ผสาน border ระหว่าง table กับ td  */
    border-collapse: collapse;
}

table,
td {
    border: 1px solid #BEBEBE;
    text-align: center;
}

thead {
    background-color: #0099CC;
    color: #000000;
}

/* Striped Tables: ทำไฮไล์ในการแบ่ง row  */
tr:nth-child(even) {
    background-color: #D3D3D3;
}

h2 {
    font-size: 10px;
    height: 27px;
    vertical-align: center;
}


td {
    font-size: 15px;
    height: 27px;
    vertical-align: center;
}

.name {
    font-size: 14px;
    text-align: left;
    padding-left: 16px;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>สรุปข้อมูลอุปกรณ์</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"" rel="nofollow">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 style="text-align: left; font-size: 22px;" >สรุปข้อมูลการยืม-คืนอุปกรณ์ </h1>
        <input type="radio" name="borrow">ดูรายงานยืมอุปกรณ์
        <input type="radio" name="return">ดูรายงานคืนอุปกรณ์
         Return to Login
        <br><br> 
        <table>
            <thead>
                <tr>
                    <td width="1.5%">#</td>
                    <td width="11%">วันที่ยืม</td>
                    <td width="7%">รหัสพนักงาน</td>
                    <td width="11%">ชื่อนามสกุล</td>
                    <td width="10%">ส่วนงาน</td>
                    <td width="8%">หมายเลขอุปกรณ์</td>
                    <td width="4%">สถานะ</td>
                    <td width="11%">หมายเหตุ</td>
                    <td width="4%">รูปภาพ</td>
                </tr>
            </thead>
            <tbody>
            <?php
			while($row = mysqli_fetch_array($nquery)){
			?>
			<tr>
			<td><?php echo $row['id']; ?></td>
			<td><?php echo $row['time']; ?></td>
			<td><?php echo $row['idcard']; ?></td>
			<td><?php echo $row['username']; ?></td>
            <td><?php echo $row['section']; ?></td>
            <td><?php echo $row['serial']; ?></td>
            <td><?php echo $row['status1']; ?></td>
            <td><?php echo $row['comment']; ?></td>
            <td><img src="./images/<?=$row['fileupload']?>" width='50' height='42'></td>

			</tr>
			<?php
			}
			?>
        </table><br>
        <div id="pagination_controls"><?php echo $paginationCtrls; ?></div>
    </div>
    
</body>
</html>
        code ที่เขียนเอาไว้ครับ

Tag : PHP

Date : 2024-03-31 21:03:53

By : tharakorn.jin

View : 77

Reply : 6

No. 1

Guest

แนะนำ
Ajax DataTable
กำหนดชื่อ Radio ให้เหมือนกันและกำหนดค่าต่างกัน

Code (PHP)

<input type="radio" name="doc_type" value="1">ดูรายงานยืมอุปกรณ์
<input type="radio" name="doc_type" value="2">ดูรายงานคืนอุปกรณ

Code (JavaScript)

$("#dataTable").dataTable({
         "ajax": {
            "url": URL,
            "type": 'POST',
            "data": function(d) {
               return {
                  doc_type: $("input[name='doc_type']:checked").val()
               };
            }
         }
      });

ที่เหลือก็ไปทำ Backend ให้ response กลับมาที่ Frontend->View

Code (PHP)

$data = Query Result ตามเงื่อนไข

foreach ($data as $row) {
	$sub_array = array();
	$sub_array = xxxx
	$sub_array = xxxx
	$sub_array = xxxx
	$sub_array = xxxx
	$sub_array = xxxx
	$sub_array = xxxx
	$sub_array = xxxx
	$sub_array = xxxx
	$sub_array = xxx
	$result[] = $sub_array;
}
echo json_encode(array('data' => $result), JSON_UNESCAPED_UNICODE);

Date : 2024-04-03 15:34:34

By : Guest

No. 2

Chaidhanan

โพสกระทู้ ( 9,559 )
บทความ ( 2 )

datatable เหมาะกับข้อมูลไม่เกิน 2mb (spec 16mb) มากกว่านั้น ก็จะอื่ดๆ ขึ้นอยู่กับ เครื่อง client
และเครื่อง server รับโหลด ได้มากน้อยขนาดไหน

แนะนำ ไม่ควรทำเป็น ajax ส่งลิงค์ ไปคิวรี่ใหม่ดีกว่า โปรแกรมเดิมก็มีอยู่แล้ว

Date : 2024-04-03 15:55:31

By : Chaidhanan

No. 3

Guest

ตอบความคิดเห็นที่ : 2 เขียนโดย : Chaidhanan เมื่อวันที่ 2024-04-03 15:55:31

รายละเอียดของการตอบ ::

dataTable: Server-Side Rendering ก็ได้

Date : 2024-04-04 09:40:30

By : Guest

No. 4

Guest

ตอบความคิดเห็นที่ : 3 เขียนโดย : Guest เมื่อวันที่ 2024-04-04 09:40:30

รายละเอียดของการตอบ ::

จะกี่ล้าน Rerord ก็จะโหลดเฉพาะหน้าที่แสดง

Date : 2024-04-04 09:42:42

By : Guest

No. 5

mr.v

โพสกระทู้ ( 4,720 )
บทความ ( 8 )

ถ้าดึงข้อมูลใหม่โดยอยู่หน้าเดิม URL เดิมก็ใช้ AJAX แหละเหมาะสุด
แต่มันก็แตกออกไปได้อีกหลายวิธี อย่างเช่นใช้ DataTable.js (+AJAX), AJAX กับ ข้อมูลที่ต้องเอามาประมวลผล-แสดงผลอีกที เช่น JSON, AJAX กับ HTML แบบเดิมๆแล้วใช้การ replace content เอาเลย

ถ้าแบบสุดท้ายก็ไม่ต้องแก้เยอะ คล้ายๆ คห.2 เพียงแต่ต้องดักตอน click check box แล้วตอนส่ง URL pagination ก็ต้องสร้าง URL ใหม่ตาม check box เพื่อให้โหลดหน้าอื่นได้ถูกต้อง.

Date : 2024-04-04 09:51:58

By : mr.v

No. 6

Chaidhanan

โพสกระทู้ ( 9,559 )
บทความ ( 2 )

ตอบความคิดเห็นที่ : 4 เขียนโดย : Guest เมื่อวันที่ 2024-04-04 09:42:42

รายละเอียดของการตอบ ::

และ feature ของ datatable มีไว้ประดับเท่านั้นเหรอ ทั้งการค้นหา ทั้งการจัดเรียง มันทำเฉพาะข้อมูลที่อยู่บน client เท่านั้น
ถ้าโหลดเฉพาะหน้าที่แสดง ก็ใช้แบบเดิมนั้่นแหล่ะ
เวลาค้นหาก็เป็นการค้นหาทั้ง table ใช้ feature ของ database server เป็นตัวจัดการ

มีตัวอย่าง datatable การแสดง webboard ให้ใช้ แบ่งเป็น โหลดครั้งละไม่เกิน 3000 เรคคอร์ด
มีทั้ง การ reload โดยไม่ต้องเปลี่ยนหน้า

Code (JavaScript)

	dt = $('#tb').DataTable({ //sDom:'tipr',
		oLanguage: {sSearch: 'Search &nbsp; : &nbsp '},
		order:[[3, 'desc']], bAutoWidth: false, pageLength:25, lengthChange: false, searching: true,
		ajax: { url: `/Forum/GetTopics/1/`, dataType: "json", contentType: "application/json; charset=utf-8"
			, dataSrc: function (js){ 
				if(js.msg==='complete'){
					console.log(js);
					let p = Math.ceil(js.data.c / 3000);
					count_topic=js.data.c;
					if( c_page<2){
						$('#sw-inc').addClass('d-none').removeClass('d-inline-block'); }else{$('#sw-inc').addClass('d-inline-block').removeClass('d-none'); } 
					if ( p > c_page){
						c_page=p; 
						let ls = (p - 1) * 3000, st=ls+1, en=js.c;
						$('#st').last().text(`${ls  -2999} - ${ls}`) ;
						$('#st').append(`<option value="${p}" >${st} - ${en}</option>`);
					}
					return js.data.rows;
				}
			}
		},
		columnDefs: [
			{targets:0, width: 200, searchable: false, orderable: true, className: 'text-center'}
			,	{targets:2, searchable: true, orderable: true, className: 'text-left',render: (data)=>{
					return `<span>${data}</span>${pen}`;
			}}
			, {targets:[3,4], width: 120, orderable: true, searchable: false, className: 'text-center'}
			, {targets:[1,5,6], width: 70, orderable: true, searchable: false, className: 'text-center'}
		],
		createdRow: function (row, data) { $(row).attr('x-id',data.id).addClass('tr-topic'); },
		columns: [
			{mData: function(ro){return ro.name;}},
			{mData: function(ro){return ro.id;}},
			{mData: function(ro){return ro.topic;}},
			{mData: function(ro){return ro.write_date.substr(2,17);}},
			{mData: function(ro){return ro.answerdate>''? ro.answerdate.substr(2,17):'-';}},
			{mData: function(ro){return ro.count_answer;}},
			{mData: function(ro){return ro.count_view;}}
		],
		drawCallback: function() { page_css();
			if( !$('#tb_filter').hasClass('start_date')){
				$('#tb_filter').addClass('start_date').append( dt_inc);
			}
			$('#st').change(function(){
				dt.ajax.url(`/Forum/GetTopics/${ForumID}/${$('#st').val()}/`);
				dt.ajax.reload();
			});
		}
	});

ประวัติการแก้ไข
2024-04-04 10:26:09

Date : 2024-04-04 10:17:37

By : Chaidhanan

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : การดึงข้อมูลมาแสดงตามเงื่อนไขของ checkbox โดยใช้หน้าเดิม แสดง

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก