ajax GET fails to send the data to php page with jtable

Question 1

Finally got the solution. I have changed the function to

$('.search').keyup(function(e){ $('#EmployeeContainer').jtable('load', { qstr: $('input#qstring').val(), });

The value qstr is sent using POST. So at the other end i'll have to use $_POST['qstr']

Question 2

try: jquery:

 $.post('EMPActions.php',{

                data = {qstr: $('input#qstring').val()}
                },
                function(response) {
                    $('#EmployeeContainer').jtable('load');
                    //$('#EmployeeContainer').html(response);
                },"json");

PHP

if(isset($_POST['qstr'])){
$data = '%'.$_POST['qstr'].'%';
}
else{
$data = '%';
}

Question 3

on ajax try this as data instead

data:$('input#qstring'),

or

data: $('input[\'name=name_of_your_field]\]'),

Question 4

Your keyup call is to this php page:

EMPActions.php?qstr=foo

The results of that page are never used (it's commented out) That success handler initializes the table. However, jtable has its own system for making data calls jtable does this to enable paging, sorting, searching, etc - each makes a slightly different call to the same page Those calls all look like this

EMPActions.php?action=list

Notice that the qstr parameter is not passed to the jtable calls

What you'll need to do is pass the qstr parameter into the initializer of the jtable, so that all data calls from jtable contain the parameter

Something like this:

$('#EmployeeContainer').jtable({
    title: 'Employee Details',
    actions: {
        listAction: 'EMPActions.php?action=list&qstr='+ $('input#qstring').val()
        }
    ...
    });

Note this will only set the qstr value the initially - you'll want to use jtable searching to narrow the results that are loaded into the table

Edit

Ok, after seeing the demo, I think its a little clearer what you want to do. I initially thought you were using some filter to setup the table; instead, you want to use a non-jtable field to filter the data constantly.

A few notes on your current live code: I think you're missing a '=' in listAction, but more importantly, listAction is only being defined once in your code, when its first run (and the text box is empty). To use your filter box, you'll need to somehow update the data in jtable on each keyup.

Looking over the jtable API, I see two possibilities:

1: Define a function instead of a string for the listAction. This will use the current version of your string field to filter the data, and will allow the normal jtable features like sorting. Ok each keyup, you should call $('#EmployeeContainer').jtable('load'); which will invoke your listAction function.

listAction: function (postData, jtParams) {
    return $.Deferred(function ($dfd) {
        $.ajax({
            url: 'EMPActions.php?action=list&qstr=' + $('input#qstring').val() + '&jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
            type: 'POST',
            dataType: 'json',
            data: postData,
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
},

2: Call the load method with your qstr parameter on each keyup (instead of making an ajax call yourself). This is simpler, but disables the normal jtable features.

$('#EmployeeContainer').jtable('load', { qstr: $('input#qstring').val() });

Edit #2

Replace your code with this, see if it works. You will need to use $_POST or $_REQUEST with this method, since this is using jtable to make the requests.

$(document).ready(function () {
    $('.search').keyup(function(){
        $('#EmployeeContainer').jtable('load', { qstr: $('input#qstring').val() });
    });             

    //Prepare jTable
    $('#EmployeeContainer').jtable({
        title: 'Employee Details',
        actions: {
            listAction: 'EMPActions.php?action=list',
            createAction: 'EMPActions.php?action=create',
            updateAction: 'EMPActions.php?action=update',
            deleteAction: 'EMPActions.php?action=delete'
        },
        fields: {
            EID: {
                title: 'EID',
                width: '10%'
                },
            EName: {
                title: 'EName',
                width: '20%'
            },
            Desgn: {
                title: 'Designation',
                width: '10%'                        
            },
            Dept: {
                title: 'Department',
                width: '15%'
            },                  
            Mobile: {
                title: 'Mobile',
                width: '15%'                        
            },
            EMail1: {
                title: 'RGUKT Mail',
                width: '15%'                        
            },
            EMail2: {
                title: 'Other EMail',
                width: '15%'                        
            }
        }
    });
});