what happens when you hit enter after typing something in the search bar of a datatable.

modihimanshu · February 21

I have come across an old php based website that is using the datatable script to display some data. when you type something in the search bar of the datatable, it sends an ajax request and filters the results based on the input string, when you press enter, it reloads the same webpage, with the entire table. I want it to filter out the data when enter is hit also. Is there a way to control what the search functionality does on hitting enter? I am not very familiar with either of php and jquery datatable to so any help here would be appreciated.

Thanks.

modihimanshu · February 21

Here is the code (for one fo the pages of the website):

<?php

include("doctype.php");
include("connect.php");
include("functions.php");

// Fetch parameters.
$cluster = $_GET["cluster"];
$job     = $_GET["job"];
$module  = ( $_GET["module"] ? $_GET["module"] : 'off' );
$product = ( $_GET["product"] ? $_GET["product"] : 'off' );
$arch    = ( $_GET["arch"] ? $_GET["arch"] : 'off' );
$level   = ( $_GET["level"] ? $_GET["level"] : 'off' );

// Define variables.
$ajaxParams = array ( 'cluster' => $cluster, 'job' => $job, 'module' => $module, 'product' => $product, 'arch' => $arch, 'level' => $level );
$ajaxUrl    = "type_query.php?" . fnEncodeParameterList($ajaxParams);

echo "<html>";
echo "<head>";
echo "<title>$cluster >> Warning Type Summary >> $job</title>";

include("style.php");

<?php
>
?>


<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.dataTables.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dataTable').dataTable({
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bEscapeRegex": true,
            "iDisplayLength": 25,
            "sPaginationType": "full_numbers",
            "sAjaxSource": <?php echo "\"$ajaxUrl\"" ?> });
} );
</script>

<?php
echo "</head>";
echo "<body class=example_alt_pagination>";

include("navigation.php");

$param1 = array( 'cluster' => $cluster );
$param2 = array( 'cluster' => $cluster, 'job' => $job );

echo "<h1>Warning Type Summary for $cluster job $job</h1>";

$navbar = array(
    fnBuildReferenceLink('cluster.php', $param1, 'CLUSTER JOB LIST'),
    fnBuildReferenceLink('job.php', $param2, 'JOB SUMMARY'),
    fnBuildReferenceLink('details.php', $param2, 'SOURCE FILE SUMMARY'),
    fnBuildReferenceLink('warnfile.php', $param2, 'WARNING FILE SUMMARY'),
    fnBuildReferenceLink('3p_libs.php', $param2, '3P LIBRARY SUMMARY'),
    "TYPE SUMMARY",
    fnBuildReferenceLink('component.php', $param2, 'COMPONENT SUMMARY'));
    
echo "<p>" . fnBuildNavigationBar($navbar) . "</p>";

echo "<h2>Warning Type Summary for " . fnBuildReferenceLink('cluster.php', $param1, $cluster) . " job $job</h2>";

// Ask whether to include Module, Product, etc. columns in result table.
echo "<form id=change name=change method=GET action=type.php>";
echo "<input name=cluster type=hidden value=$cluster>";
echo "<input name=job type=hidden value=$job>";

echo "Include following columns in result - ";
echo "<input name=module type=checkbox onclick=\"document.getElementById('change').submit();\"";
if ($module == 'on') { echo "checked=yes value=on"; }
echo "> Module - ";

echo "<input name=product type=checkbox onclick=\"document.getElementById('change').submit();\"";
if ($product == 'on') { echo "checked=yes value=on"; }
echo "> Product - ";

echo "<input name=arch type=checkbox onclick=\"document.getElementById('change').submit();\"";
if ($arch == 'on') { echo "checked=yes value=on"; }
echo "> Architecture - ";

echo "<input name=level type=checkbox onclick=\"document.getElementById('change').submit();\"";
if ($level == 'on') { echo "checked=yes value=on"; }
echo "> Warning Level";
echo "<br><br>";

// Define columns for table header/footer.
$tableColumns = array();

if ($module == 'on') {
    array_push($tableColumns, 'Module');
}

if ($product == 'on') {
    array_push($tableColumns, 'Product');
}

if ($arch == 'on') {
    array_push($tableColumns, 'Architecture');
}

if ($level == 'on') {
    array_push($tableColumns, 'Level');
}

array_push($tableColumns, 'Type', 'Warnings');

echo "<table class=\"display dataTable\">";
echo fnBuildTableHeaderOrFooter($tableColumns, true);

echo "<tbody valign=top align=center>";
echo "<tr><td>Loading data from server</td></tr>";
echo "</tbody>";

echo fnBuildTableHeaderOrFooter($tableColumns, false);

<?php
>
?>


</table>
</body>
</html>

allan · February 21

when you press enter, it reloads the same webpage, with the entire table.

I don't know why it would be doing that. You don't say what version of DataTables you are using, but there is no version that should be resulting in a page reload when the enter key is pressed at that point.

We introduced search.return in 1.11 to delay search until the enter key is pressed, but that doesn't sounds like what you are seeing. Pehaps your DataTable is inside a <form> and that is triggering the submit? Without a test case it is impossible to say, and it sounds like you might be using an old unsupported version of DataTables.

Allan

what happens when you hit enter after typing something in the search bar of a datatable.

what happens when you hit enter after typing something in the search bar of a datatable.

Answers

Howdy, Stranger!

Categories

DataTables

what happens when you hit enter after typing something in the search bar of a datatable.

what happens when you hit enter after typing something in the search bar of a datatable.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables