Table with html and javascript from a csv file

Question

The table has about 10,000 rows. When the page loads it takes a long time.

I want to add sort and filter and pagination function to it.How can I do so ?

I want some knowledge about how to use datatables with Javascript and Ajax.

Answer 1

This solution is something you can consider. It requires some knowledge of Python particularly Pandas ( a python Library) and Flask( microframework) .

Use this snippet to read csv and convert to html tables.

Python code

@app.route("/")
def show_tables():
    data = pd.read_csv("myfile.csv")
    return render_template('index.html',tables=[re.sub(' mytable', '" id="example', data.to_html(classes='mytable'))],
    titles = ['Excel Data to Flask'])

index.html

<!doctype html>
<head>   
<link rel=stylesheet type=text/css href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel=stylesheet type=text/css href="https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css">
<!--<link rel=stylesheet type=text/css href="https://cdn.datatables.net/responsive/1.0.4/css/dataTables.responsive.css"> -->
</head>
<body>
<div class=page> 
  {% for table in tables %}
    <h2>{{titles[loop.index]}}</h2>
    {{ table|safe }}
  {% endfor %}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"> </script>
</body>
</html>

You can read more about the topic here Pandas : CSV to HTML

This will make reading csv files easier and faster along with the use of javascript datables.

Table with html and javascript from a csv file

Question

1 answers

solution1
0 ACCPTED 2018-11-23 06:41:16

Table with html and javascript from a csv file

Question

1 answers

solution1 0 ACCPTED 2018-11-23 06:41:16

solution1
0 ACCPTED 2018-11-23 06:41:16