Импорт таблицы html в html-страницу

У меня есть полностью функциональный html-файл прямо сейчас, у которого много контента, и я хотел бы увеличить читаемость, сохранив таблицу в отдельном файле. Данные таблицы составляют около 3000 строк html. Текущая структура:Импорт таблицы html в html-страницу

HTML:

<body> 
    <!-- Lots of content --> 

    <table> 
     <!-- Lots of data --> 
    </table> 

    <!-- Other content --> 

    <script> 
     <!-- Set up as table as datatable (jQuery plug-in) --> 
     <!-- Add dynamic formatting to table --> 
    </script> 
</body>

Как я могу заменить <table> ... </table> только с вызовом другой HTML-файл, содержащий все данные, так что я еще могу сделать все содержимого javascript для таблицы?

источник

2015-06-25 lg22woo

Зачем нужен другой html-файл, а не только файл json с данными? – Michelangelo

Я никогда не использовал json - я не против, я просто не понимал, что это вариант. – lg22woo

Хорошо, круто без проблем. Замечательная вещь с JSON заключается в том, что вы можете делать асинхронные вызовы с помощью jQuery AJAX. http://api.jquery.com/jquery.ajax/ – Michelangelo

Использование jQuery, вы можете сделать это с помощью команды GET, а затем добавить ее в div, в котором вы хотите, чтобы таблица закончилась.

Код для импорта данных будет выглядеть следующим образом:

$.ajax(
    {url:"tabledata.html", 
    dataType:"text"}).done(
    function(data){ 
     $('#id_of_div_to_append_to').html(data); 
    });

Кроме того, вам нужно добавить DIV, добавляемых данные в вашем HTML:

<body> 
    <!-- Lots of content --> 

    <div id = "id_of_div_to_append_to"></div> 

    <!-- Other content --> 

    <script> 
     <!-- Set up as table as datatable (jQuery plug-in) --> 
     <!-- Add dynamic formatting to table --> 
    </script> 
</body>

источник

2015-06-25 17:16:46 userbd

На главной странице находится index.html, который содержит контейнер контейнера таблицы, а страница с данными - tableData.html. Я положил ваш c ode в index.html? И будет ли это '$ .get (" tableData.html ", function (data) {$ ('# tableContainer'). Append (data);})'? – lg22woo

@ lg22woo Где находится ваш tableData.html? В тех же папках, что и index.html? – Michelangelo

@ lg22woo Да. код должен идти в index.html. Код предполагает, что ваш файл данных находится в той же папке, что и index.html. Попробуйте, дайте мне знать, что произойдет. – userbd

Это очень комплексное решение на мой вопрос, но если у вас есть время, чтобы узнать Угловое, я бы рекомендовал его:

https://www.codeschool.com/courses/shaping-up-with-angular-js

Угловой разрешил мне сделать мой html более читабельным и динамичным.

источник

2015-06-26 19:01:47 lg22woo

Импорт таблицы html в html-страницу

ответ

Смежные вопросы