Passing value to details column search
Passing value to details column search
Hi,
I've done up a detailed column search for certain column. I am able to search with no issue.
Next, I came up with a search function which I hope that user that uses the search function will direct the user to the search result.
Example.
The search function is on page 1.
The result page is on Page 2.
Once searched, it will direct user to result page with few $_GET variable.
Page 2 will automatically grab the $_GET variable and pluck it onto the detailed column search field and do a search.
This is what I've now. Example of a URL with $_GET variable.
[code]index.php?display=property&type=hdb[/code]
[code]
// Get the value of $_GET
function getQuerystring(key, default_)
{
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
return default_;
else
return qs[1];
}
var asInitVals = new Array();
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
/*
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
*/
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php?dt=<?php echo $type; ?>&id=<?php echo $R1['agentid']; ?>",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"bStateSave": true,
"fnDrawCallback": function() {
$("#modal a").fancybox({
'hideOnContentClick': true
});
},
// Default sorting order (column [index], type)
"aaSorting": [[1, 'asc']],
"oLanguage": {
"sSearch": "Search all columns:"
}
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
/*
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */ /*
this.src = "images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */ /*
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
*/
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
// Getting $_GET['type'] value
var type = getQuerystring('type');
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
[/code]
I've done up a detailed column search for certain column. I am able to search with no issue.
Next, I came up with a search function which I hope that user that uses the search function will direct the user to the search result.
Example.
The search function is on page 1.
The result page is on Page 2.
Once searched, it will direct user to result page with few $_GET variable.
Page 2 will automatically grab the $_GET variable and pluck it onto the detailed column search field and do a search.
This is what I've now. Example of a URL with $_GET variable.
[code]index.php?display=property&type=hdb[/code]
[code]
// Get the value of $_GET
function getQuerystring(key, default_)
{
if (default_==null) default_="";
key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
return default_;
else
return qs[1];
}
var asInitVals = new Array();
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
/*
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
*/
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php?dt=<?php echo $type; ?>&id=<?php echo $R1['agentid']; ?>",
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"bStateSave": true,
"fnDrawCallback": function() {
$("#modal a").fancybox({
'hideOnContentClick': true
});
},
// Default sorting order (column [index], type)
"aaSorting": [[1, 'asc']],
"oLanguage": {
"sSearch": "Search all columns:"
}
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
/*
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */ /*
this.src = "images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */ /*
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
*/
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
// Getting $_GET['type'] value
var type = getQuerystring('type');
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
[/code]
This discussion has been closed.
Replies
[code]
Type
Blk
Floor
Valuation
Asking
Remarks
View Images
Loading data from server
<!--For details column -->
[/code]
So normally, if not using the search function. User goes to the page listing directly and if they wanted, they could use the detailed column search to filter the result.
But this time, I am passing the value from the search result to the listing page and want to input the value to the detailed column search field using the $_GET value instead.
It's a little confusing here, so I'm not sure if I had explained myself well. Please let me know if there is any question and I'll try my best to answer.
tyvm.
Any direction would be good enough.