Ruby Sinatra table from MySQL -

i working on project have pull data mysql database , display data in table using ruby sinatra.

i able connect database , pull data , put inside array.

example of table in database

city country dallas usa tokyo japan

example of array looks like

["dallas, usa", "tokyo, japan"]

now, how display array table database. or, there way can copy table database onto webpage?

thanks help!

your_app/routes.rb:

require 'sinatra' require 'slim'  '/'    raw_data = [     "dallas, usa",      "tokyo,japan",      "munich,    germany",   ]    @results = {}    raw_data.each |item|     city, country = item.split(/, \s* /x)     @results[city] = country   end    p results # {"dallas"=>"usa", "tokyo"=>"japan", "munich"=>"germany"}    slim :index   end 

your_app/views/layout.slim:

doctype html  html   head      meta charset="utf-8"     title test     css:       th {text-align:left}       table {width: 15em}   body      h1 layout.  find me in your_app/views/layout.slim     == yield  

note css, left aligns column headers--otherwise column headers centered.

your_app/views/index.slim:

table    thead     tr       th city       th country    tbody   - @results.each |city, country|     tr       td = city       td = country 

result:

edit:

to use jquery program tablesorter, download tablesorter, unzip/untar it, move newly created directory, tablesorter-master, directory your_app/public/.

you can use these files:

your_app/views/layout.slim:

doctype html  html   head      meta charset="utf-8"     title test     link rel="stylesheet" type='text/css' href="tablesorter-master/themes/green/style.css"   body      h1 layout.  find me in your_app/views/layout.slim     == yield       script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" !<= link     script src="tablesorter-master/jquery.tablesorter.js"     script src="hookup_tablesorter.js" 

your_app/public/hookup_tablesorter.js:

$(document).ready(function()    {      $("#mytable").tablesorter();    }  );  

your_app/views/index.slim:

table id="mytable" class="tablesorter"   thead     tr       th city       th country    - @results.each |city, country|     tr       td = city       td = country 

note changes above. slim adds tbody tag automatically, therefore explicitly adding tbody tag in slim template creates 2 tbody tags screws tablesorter.

then see this:

and clicking on column headers sort rows. need internet connection link jquery file. alternative, can download jquery, , put in directory your_app/public/, link it:

doctype html  html   head      meta charset="utf-8"     title test     link rel="stylesheet" type='text/css' href="tablesorter-master/themes/green/style.css"   body      h1 layout.  find me in your_app/views/layout.slim     == yield       script src="jquery.min.js"     script src="tablesorter-master/jquery.tablesorter.js"     script src="js_ready.js" 

if don't table style, tablesorter has blue theme:

and people have created other styles.