Таблица Ruby Sinatra от MySQL

Question

В настоящее время я работаю над проектом, где мне нужно извлекать данные из базы данных MySQL и отображать данные в таблице с помощью Ruby Sinatra.

Я смог подключиться к базе данных и вытащить данные и поместить их в массив.

Пример таблицы в базе данных

City Country Dallas USA Tokyo Japan

пример того, что массив выглядит

[ "Даллас, США", "Токио, Япония"]

Теперь, как бы я отобразить массив, чтобы он выглядел точно так же, как и таблица из базы данных. Или, есть способ, где я могу полностью скопировать таблицу из базы данных на веб-страницу?

Спасибо за помощь!

Answer 1

your_app/routes.rb:

require 'sinatra' 
require 'slim' 

get '/' do 

    raw_data = [ 
    "Dallas, USA", 
    "Tokyo,Japan", 
    "Munich, Germany", 
    ] 

    @results = {} 

    raw_data.each do |item| 
    city, country = item.split(/, \s* /x) 
    @results[city] = country 
    end 

    p results # {"Dallas"=>"USA", "Tokyo"=>"Japan", "Munich"=>"Germany"} 

    slim :index 

end 

your_app/просмотров/layout.slim:

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

Обратите внимание на CSS, который оставил выравнивает заголовки столбцов - в противном случае заголовки столбцов будут по центру.

your_app/просмотров/index.slim:

table 
    thead 
    tr 
     th City 
     th Country 

    tbody 
    - @results.each do |city, country| 
    tr 
     td = city 
     td = country 

Результат:

Edit:

Чтобы использовать программу TableSorter Jquery, скачать tablesorter, распаковать/untar, затем переместите вновь созданный каталог, tablesorter-master, в каталог your_app/public/.

Вы можете использовать эти файлы:

your_app/просмотров/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 This is the 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" !<= the 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/просмотров/индекс. slim:

table id="myTable" class="tablesorter" 
    thead 
    tr 
     th City 
     th Country 

    - @results.each do |city, country| 
    tr 
     td = city 
     td = country 

Обратите внимание на приведенные выше изменения. Slim добавляет тег tbody автоматически, поэтому явное добавление тега tbody в шаблон Slim создает два тега тэга, которые закручивают tablesorter.

Тогда вы увидите следующее:

и нажав на заголовки столбцов будет сортировать строки. Для подключения к файлу jquery требуется подключение к Интернету.В качестве альтернативы, вы можете загрузить JQuery, и поместить его в каталог your_app/public/, то ссылка на него:

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 This is the 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" 

Если вам не нравится этот стиль таблицы, TableSorter также имеет синюю тему:

И люди создали другие styles.