CODEWITHSUNDEEP
javascripthtml
Sandeep Lade
Sandeep Lade

Reputation: 1943

Filter and search by Column in HTML page

I am preparing a dashboard and prepared a static HTML page with a table in it Now I want to add filter+search for each column.

I have got a JS file from http://wsabstract.com/script/script2/TableFilter_EN.zip and as suggested in http://wsabstract.com/script/script2/tablefilter.shtml I added below in my HTML file but doesn't seems working Did I miss something ? Is there a quick Java script I can use ?

<html>
<head>
<style>
table {
    font-family: arial;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 2px solid #dddddd;
    text-align: left;
    padding: 8px;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript" src="C:\Docs\Personal\Study\Scripts\TableFilter_EN\tablefilter.js">
setFilterGrid("myTable");
</script> 
<table id='myTable'>
<caption>Lab Dashboard</caption>
<tr style="background-color:DodgerBlue;">
<th>IP</th><th>Ping</th><th>SSHConnectivity</th><th>SSHLogin</th><th>Device Type</th><th>Version</th>
</tr>
<tr>
<td>10.22.156.1</td><td>OK</td><td>OK</td><td>NOK</td><td>Could not find</td><td>ArubaOS (MODEL: ArubaS2500-48P), Version 7.4.1.6 (56990)</td></tr></table>
</body>
</html>

Upvotes: 0

Views: 106

Answers (1)

Gautam
Gautam

Reputation: 825

Your code is wrong, try below code it will work.

<html>
<head>
    <style>
        table {
            font-family: arial;
            border-collapse: collapse;
            width: 100%;
        }
        td, th {
            border: 2px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
    </style>
</head>
<body>

<table id="mytable">
    <tbody>
    <tr>
    <tr style="background-color:DodgerBlue;">
        <td>IP</td>
        <td>Ping</td>
        <td>SSHConnectivity</td>
        <td>SSHLogin</td>
        <td>Device Type</td>
        <td>Version</td>
    </tr>


    <tr>
        <td>10.22.156.1</td>
        <td>OK</td>
        <td>OK</td>
        <td>NOK</td>
        <td>Could not find</td>
        <td>ArubaOS (MODEL: ArubaS2500-48P), Version 7.4.1.6 (56990)</td></tr>
    </tr>

    <tr>
        <td><strong>Sydney</strong></td>
        <td>Brisbane</td>
        <td>982</td>
        <td>1.5</td>

        <td>17</td>
        <td>16</td>
    </tr>

    </tbody></table>

<script src="C:\Docs\Personal\Study\Scripts\TableFilter_EN\tablefilter.js"></script>
<script language="javascript" type="text/javascript">
    setFilterGrid("mytable");
</script>
</body>
</html>

Upvotes: 1

Related Questions