How to add a search box inside html csv database

pedropt · 11-15-2022, 04:41 PM

Hi guys , i am lost here because i have no experience in html code , i have been looking on the web for solutions but none of them solved my problem .
I am loading a heavier csv file (7 Megabytes) into an html page and i am using this code :

Code:

<HTML>
<HEAD>
  <META NAME="GENERATOR" CONTENT="Adobe PageMill 3.0 Win">
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
  <TITLE>Audio Database</TITLE>
<style type="text/css">
  <!--
body,td,th {
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
.style1 {
	font-size: 24px;
	font-weight: bold;
}
  -->
</style>
</HEAD>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            table {
                border-collapse: collapse;
                border: 2px black solid;
                font: 12px sans-serif;
            }

            td {
                border: 1px black solid;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <script src="d3.v3.min.js"></script> 
        <script src="d3.min.js?v=3.2.8"></script>

        <script type="text/javascript"charset="utf-8">
            d3.text("data.csv", function(data) {
                var parsedCSV = d3.csv.parseRows(data);

                var container = d3.select("body")
                    .append("table")

                    .selectAll("tr")
                        .data(parsedCSV).enter()
                        .append("tr")

                    .selectAll("td")
                        .data(function(d) { return d; }).enter()
                        .append("td")
                        .text(function(d) { return d; });
            });
        </script>

</BODY>
</HTML>

With this code the database loads fast but i want to add a search box on the html page , how can i do that without changing the current way this html loads the database ?

Thank you for your patience .

boughtonp · 11-15-2022, 04:51 PM

Whenever I've needed to do similar things DataTables has done what I need.

It's very configurable, and includes a search box by default.

AnanthaP · 11-16-2022, 01:03 AM

Since it is already rendered and displayed in the browser, a simple <CTRL+F> may do the job.

pedropt · 11-16-2022, 02:45 AM

CTRL+F is not a solution because i have hundreds of results with same keyword .

The search box must work like a filter and show up only the lines that contain that specific keyword .

You surely tested is a CSV with 4 lines , try to do it in a csv with 47588 lines and you will see that CRTL+F do not work for that purpose .

Turbocapitalist · 11-16-2022, 06:43 AM

Why load 47,588 into the client again and again? I'd look into doing it with SQLite and Python over FastCGI on the back end instead.

boughtonp · 11-16-2022, 07:57 AM

If it's too much data for a browser to handle then it should not be loaded in one go.

Also, no need to waste bandwidth transferring 7MB of data if someone only wants a fraction of 1% of it.

I'd still recommend DataTables - there's very likely a premade backend in whatever language/framework is preferred (a quick search of PyPi shows plenty of Python options), but it's also pretty easy to configure DataTables to work with an arbitrary/bespoke API.

pedropt · 11-16-2022, 12:26 PM

I do not have adsl to worry about the heavy bandwidth , this is for my internal network witch works on 1Gb lan cards , right now the browser loads all data in 2 seconds , so do not worry about the load .
I want the list to be opened as full and if i decide to search for something then it must be filtered .
I have look at datatables and it looks complicated for my knowledge and it requires sql engine running ,witch i do not want , and php engine to run it .

Please , do not post here more comments about the load of the file to a browser , if i had that issue then i had posted it on my first post .

The main objective is to use javascript to do the job only .

boughtonp · 11-16-2022, 12:51 PM

Quote:

Originally Posted by pedropt

...it requires sql engine running ,witch i do not want , and php engine to run it .

It requires neither of those things.

pedropt · 11-16-2022, 01:22 PM

https://editor.datatables.net/generator/index

scasey · 11-16-2022, 01:29 PM

Quote:

Originally Posted by pedropt

The main objective is to use javascript to do the job only .

One can certainly use JavaScript to add a search field and accept input.
I’m not thinking of a way to easily update an existing already-rendered page to remove non-matching rows. I’d use the input value to filter the source data before (as) you reload the page.

pedropt · 11-16-2022, 02:36 PM

Scasey , what about using the same input box to go back , if there in nothing in input box then database i full , but as soon as a character in entered then it starts filtering .

In the past i used an applet to do all this job and it worked perfectly well , but since flash player was removed from browsers then i was unable to get it working again , despite all those flash player emulators as an extension for web browsers , the database do not work well or at all , this is why i had to search a simple alternative for the job .

Probably found a solution to it while searching in the web now , i have been looking everywhere and this git passed thru me .
It uses python to start the webserver , but probably i will be able to make it work with apache

https://github.com/derekeder/csv-to-html-table

Ill be in touch soon

pedropt · 11-16-2022, 03:52 PM

This github works well with apache but it takes 2 minutes to load all the data and it takes another 2 minutes to filter the request from search box .

This github database was from data tables because all java scripts and CSS have their mark on it .

It works for now but if anyone have a more faster idea then it would be nice to test it .

TB0ne · 11-16-2022, 05:05 PM

Quote:

Originally Posted by pedropt

This github works well with apache but it takes 2 minutes to load all the data and it takes another 2 minutes to filter the request from search box .
This github database was from data tables because all java scripts and CSS have their mark on it . It works for now but if anyone have a more faster idea then it would be nice to test it .

You were given suggestions, but don't want to use them, and were fairly rude about what you "do not" want to see.

A CSV file is NOT a database; it is data. Databases like sqlite and MySQL are purposely written for this purpose. And if you already have a web server running, why is installing PHP and using the wealth of tools available to read databases not something you want?? Especially if this is for an internal website, with a small amount of data. The overhead for even running full-bore MySQL and PHP would be trivial.

Use the right tool for the job, or be happy with what you have.