简体   繁体   中英

Can't pass value from option value and display on table using jQuery AJAX PHP

This is the image in inspect element when I clicked the option enter image description here

this is the option enter image description here

and show an alert enter image description here

This is my HTML

This is my select tag and option value

<div class="dt_limit">Limit :
    <select id="dt_limit" style="width:60px;" onchange="javascript:load_timesheet_logs_list_dt();">
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="200">200</option>
    </select>
</div>

This is my JavaScript Function. This is the function I created using jQuery AJAX. The url is my php path directory, I'm not sure about the query variable that I concatenated in url

function load_timesheet_logs_list_dt() {
    var data = $('#dt_limit').val();
    var pathname =location.search;
    var convert_data = parseInt(data);

    $.ajax({
        type: 'GET',
        url: 'attendance/manage',
        data:  ({ data: data}) ,
        success: function(data){
            return data;
        },
        error: function( jqXHR, textStatus, errorThrown){
            alert(errorThrown);
        }
    })
}

This is my PHP Function
the $per_page variable is just for experimenting only
I manually created that variable for showing data, the code works fine but I want to make it dynamic when selecting a value from select tag on my html then show the data on my table depending on the value selected in option tag**

function manage() {
    $per_page = $_GET['data'];
    $page_number = (int) $_GET['pageID'];

    if ($page_number > 0) {
        $page_number--;
        $start_record = $page_number * $per_page;
    } else {
        $start_record = $page_number;
    }
}

Change

$per_page = 100;

to

$per_page = $_GET['data'];

Get method using get values this one '$_GET['data']'. tested working good Hope this helps you.

index.html
====
<div class="dt_limit">Limit :
    <select id="dt_limit" style="width:60px;" onchange="javascript:load_timesheet_logs_list_dt();">
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="200">200</option>
    </select>
</div>

jQuery
======
function load_timesheet_logs_list_dt() {
    var data = $('#dt_limit').val();
    var pathname =location.search;
    var convert_data = parseInt(data);
    var query = window.location.search;

    $.ajax({
        type: 'GET',
        url: query + '/post.php',
        data:  ({ data: data}) ,
        success: function(data){
            return data;
        },
        error: function( jqXHR, textStatus, errorThrown){
            alert(errorThrown);
        }
    })
}

post.php ===

manage();
function manage() {
    $per_page = 100;
    $page_number = (int) $_GET['data'];

    if ($page_number > 0) {
        $page_number--;
        $start_record = $page_number * $per_page;
    } else {
        $start_record = $page_number;
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM