LinuxQuestions.org
Review your favorite Linux distribution.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 11-15-2022, 05:41 PM   #1
pedropt
Member
 
Registered: Aug 2014
Distribution: Devuan
Posts: 335

Rep: Reputation: Disabled
How to add a search box inside html csv database


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 .
 
Old 11-15-2022, 05:51 PM   #2
boughtonp
Senior Member
 
Registered: Feb 2007
Location: UK
Distribution: Debian
Posts: 2,983

Rep: Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120

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.


Last edited by boughtonp; 11-15-2022 at 05:52 PM.
 
Old 11-16-2022, 02:03 AM   #3
AnanthaP
Member
 
Registered: Jul 2004
Location: Chennai, India
Posts: 952

Rep: Reputation: 217Reputation: 217Reputation: 217
Since it is already rendered and displayed in the browser, a simple <CTRL+F> may do the job.
 
1 members found this post helpful.
Old 11-16-2022, 03:45 AM   #4
pedropt
Member
 
Registered: Aug 2014
Distribution: Devuan
Posts: 335

Original Poster
Rep: Reputation: Disabled
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 .
 
Old 11-16-2022, 07:43 AM   #5
Turbocapitalist
LQ Guru
 
Registered: Apr 2005
Distribution: Linux Mint, Devuan, OpenBSD
Posts: 6,540
Blog Entries: 3

Rep: Reputation: 3410Reputation: 3410Reputation: 3410Reputation: 3410Reputation: 3410Reputation: 3410Reputation: 3410Reputation: 3410Reputation: 3410Reputation: 3410Reputation: 3410
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.
 
Old 11-16-2022, 08:57 AM   #6
boughtonp
Senior Member
 
Registered: Feb 2007
Location: UK
Distribution: Debian
Posts: 2,983

Rep: Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120

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.

 
1 members found this post helpful.
Old 11-16-2022, 01:26 PM   #7
pedropt
Member
 
Registered: Aug 2014
Distribution: Devuan
Posts: 335

Original Poster
Rep: Reputation: Disabled
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 .

Last edited by pedropt; 11-16-2022 at 01:52 PM.
 
Old 11-16-2022, 01:51 PM   #8
boughtonp
Senior Member
 
Registered: Feb 2007
Location: UK
Distribution: Debian
Posts: 2,983

Rep: Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120Reputation: 2120
Quote:
Originally Posted by pedropt View Post
...it requires sql engine running ,witch i do not want , and php engine to run it .
It requires neither of those things.

 
Old 11-16-2022, 02:22 PM   #9
pedropt
Member
 
Registered: Aug 2014
Distribution: Devuan
Posts: 335

Original Poster
Rep: Reputation: Disabled
https://editor.datatables.net/generator/index
 
Old 11-16-2022, 02:29 PM   #10
scasey
LQ Veteran
 
Registered: Feb 2013
Location: Tucson, AZ, USA
Distribution: CentOS 7.9.2009
Posts: 5,569

Rep: Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175Reputation: 2175
Quote:
Originally Posted by pedropt View Post
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.
Im not thinking of a way to easily update an existing already-rendered page to remove non-matching rows. Id use the input value to filter the source data before (as) you reload the page.
 
Old 11-16-2022, 03:36 PM   #11
pedropt
Member
 
Registered: Aug 2014
Distribution: Devuan
Posts: 335

Original Poster
Rep: Reputation: Disabled
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

Last edited by pedropt; 11-16-2022 at 03:43 PM.
 
Old 11-16-2022, 04:52 PM   #12
pedropt
Member
 
Registered: Aug 2014
Distribution: Devuan
Posts: 335

Original Poster
Rep: Reputation: Disabled
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 .
 
Old 11-16-2022, 06:05 PM   #13
TB0ne
LQ Guru
 
Registered: Jul 2003
Location: Birmingham, Alabama
Distribution: SuSE, RedHat, Slack,CentOS
Posts: 25,407

Rep: Reputation: 7574Reputation: 7574Reputation: 7574Reputation: 7574Reputation: 7574Reputation: 7574Reputation: 7574Reputation: 7574Reputation: 7574Reputation: 7574Reputation: 7574
Quote:
Originally Posted by pedropt View Post
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.
 
  


Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
For multiple csv files how do I add the value of one particular entry in any given csv to that csv's name? sean mckinney Programming 8 01-22-2021 10:46 AM
How to print lines in csv file if 1 csv column field = "text". There are 10 column (;) in csv file nexuslinux Linux - Newbie 9 04-23-2016 12:35 AM
[SOLVED] How to script csv editing? Remove rows from csv file that do not contain certain text ingram87 Linux - Software 9 08-03-2012 01:45 PM
Map 1 CSV's columns to matching columns in another CSV 2legit2quit Programming 7 10-27-2011 09:53 AM
Comparing two csv files and write different record in third CSV file irfanb146 Linux - Newbie 3 06-30-2008 10:15 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 06:55 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration