PHP and HTML table search using javascript

Question

I want to create a search box, that only displays matched entries as search phrases are typed; the same in function as described here:

How to perform a real time search and filter on a HTML table

The difference is, the table I have is created from a PHP loop - and SQL data. But, I am unsure how to adopt the code to work for me.

Personally, I think it could be related to the "// printing table rows" section.

Here is the code:

var $search_rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $search_rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

<html>

<script src="./jquery-1.6.4.js"></script>
<script src="./sorttable.js"></script>
<script src="./searchbox.js"></script>

<link rel="stylesheet" href="styles.css">

<head>
<title>Tau Empire Cadre Census</title>
</head>

<body>
<?php


//// //// //// ////
// DATABASE
//// //// //// ////

//database credentials
$db_host="localhost";
$db_user="tau";
$db_pwd="kuhohNg3";
$db="tau_census";
$db_table="cadres";

//make the connection
if (!mysql_connect($db_host, $db_user, $db_pwd))
    die("Can't connect to database");

if (!mysql_select_db($db))
    die("Can't select database");

// sending query
$result = mysql_query("SELECT * FROM {$db_table}");
if (!$result) {
    die("Query to show fields from table failed");
}

//assign a variable the number of returned table fields
$fields_num = mysql_num_fields($result);


//// //// //// ////
// HEADING
//// //// //// ////

echo "<h1>Tau Empire Cadre Census</h1>";
// Search box
echo '<input type="text" id="search" placeholder="Type to search">';


//// //// //// ////
// TABLE
//// //// //// ////

//create the table, and use the JS sortable script
echo '<table id="table" class="sortable"><tr>';

// printing table headers
echo "<td class=headings>Designation</td>";
echo "<td class=headings>Location</td>";
echo "<td class=headings>Founding</td>";
echo "<td class=headings>Commanding Officer</td>";
echo "<td class=headings>Current Status</td>";
echo "<td class=headings>Current Location</td>";
echo "<td class=headings>Mission</td>";

echo "</tr>\n";

// printing table rows
while($row = mysql_fetch_row($result))
{
    echo "<tr>";
    // For each field print the content
    for($i=1; $i<$fields_num; $i++) {
        echo "<td>" . $row[$i] . "</td>";
    }
    echo "</tr>";
}

echo "</table>";

mysql_free_result($result);

?>

</body>
</html>

Running this does not throw up any errors, but nor does it work either. This requires brains greater than mine to work out, please.

What do you see in your browser console? Any error messages? What version of the jQuery library have you loaded? Is your code wrapped in a `$(document).ready()` or `$(function(){...});`? — Sean, Jan 24 '16 at 21:40
your code here is not closing your cell properly- ` `echo "$row[$i] — Sean, Jan 24 '16 at 21:49
There are no errors in the console, nothing at all in fact. I'm not sure how jQuery libraries work, so do not know how to find that out. All I know is what's in the HTML; jquery-1.6.4.js. I hadn't wrapped the code, but did try both your suggestions, neither corrected the problem; nor did either generate any errors. — n1md4, Jan 24 '16 at 23:04
@Sean No, not the min.js bit, I've only got what's on the 3rd line down in the HTML snippet. I added "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" following another post, but that's made no difference. — n1md4, Jan 24 '16 at 23:29
@n1md4 - Looks good to me. Check this [fiddle](https://jsfiddle.net/Logan_Wayne/v0w2xu8a/). Check your console log and if you're including the jQuery properly. — Logan Wayne, Jan 25 '16 at 03:34

n1md4 · Answer 1 · 2016-01-25T13:52:04.850

1

I have this working now, thanks for all the assistance. It was a possible combination of the following:

i) Having the following script lines inserted correctly:

<script src="./jquery.min.js"></script>
<script src="./jquery-1.6.4.js"></script>

ii) Wrapping the external JS in $(function(){...});

iii) Incorrectly constructing my table rows and data fields.

edited Jan 25 '16 at 13:52

answered Jan 25 '16 at 13:16

n1md4

11
3

Great! And if you think we helped you here as well with the portion you posted, how about a thumbs up :) – Andrew Jan 25 '16 at 23:45

Andrew · Answer 2 · 2016-01-24T21:50:18.670

0

Since you think the problem lies in the "printing table rows" section, I will point out that indeed you have formatting issues in that section, fix them like this and it might solve some of the problems:

// printing table rows
while($row = mysql_fetch_row($result))
{
    echo "<tr>";
    // For each field print the content
    for($i=1; $i<$fields_num; $i++) {
        echo "<td>" . $row[$i] . "</td>";
    }
    echo "</tr>";
}

edited Jan 24 '16 at 21:50

answered Jan 24 '16 at 21:46

Andrew

18,680
13
103
118

by putting the ``/`` inside the `for()` loop, they will get a row for every column, instead of a cell for every column. – Sean Jan 24 '16 at 21:48
right... So they'd want the tr's outside, then, edited it – Andrew Jan 24 '16 at 21:50
That was pretty fundamental! Thanks for the corrections. Sadly though it is apparently not the only problem with my code, it still does not work. – n1md4 Jan 24 '16 at 23:01

PHP and HTML table search using javascript

2 Answers2