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
– Sean, Commented Jan 24, 2016 at 21:40
your code here is not closing your cell properly- </td -> echo "<td>$row[$i]</td"; — Sean
– Sean, Commented Jan 24, 2016 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
– n1md4, Commented Jan 24, 2016 at 23:04
so you have something like <script src="...jquery-1.6.4.min.js"></script> in your <head>? — Sean
– Sean, Commented Jan 24, 2016 at 23:20

n1md4 · Accepted Answer · 2016-01-25 13:52:04Z

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, 2016 at 13:52

answered Jan 25, 2016 at 13:16

n1md4

113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Over a year ago

Great! And if you think we helped you here as well with the portion you posted, how about a thumbs up :)

Andrew · Accepted Answer · 2016-01-24 21:50:18Z

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, 2016 at 21:50

answered Jan 24, 2016 at 21:46

Andrew

20.4k13 gold badges110 silver badges122 bronze badges

3 Comments

Sean Over a year ago

by putting the <tr>/</tr> inside the for() loop, they will get a row for every column, instead of a cell for every column.

Andrew Over a year ago

right... So they'd want the tr's outside, then, edited it

n1md4 Over a year ago

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.

Collectives™ on Stack Overflow

PHP and HTML table search using javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related