Не работает footable

207
24 декабря 2018, 08:10

У меня есть JSP страничка, на которую (не целевую пока что, тестовую) я хочу добавить таблицу footable:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <link rel="stylesheet" href="res_css/res_css_jquery/jquery.ui.all.css" type="text/css"  media="all"/>
    <link rel="stylesheet" href="res_css/res_css_jquery/jquery.multiselect.css" type="text/css"/>
    <script type="text/javascript" src="res_script/res_script_jquery/jquery.js"></script>
    <script type="text/javascript" src="res_script/res_script_jquery/jquery-ui.js"></script>
    <script type="text/javascript" src="res_script/res_script_jquery/jquery-ui-i18n.js"></script>
    <script type="text/javascript" src="res_script/res_script_jquery/jquery.dataTables.js"></script>
    <script type="text/javascript" src="res_script/res_script_jquery/jquery.multiselect.js"></script>
    <script type="text/javascript" src="dwr/engine.js"></script>
    <script type="text/javascript" src="dwr/util.js"></script>
    <script type="text/javascript" src="dwr/interface/FamilyClientHighLevelMainClass.js"></script>
    <script type="text/javascript" src="dwr/interface/FamilyClientHighLevelSystemInformationClass.js"></script>
    <script type="text/javascript" src="dwr/interface/FamilyClientHighLevelOptionalClass.js"></script>
    <link rel="stylesheet" href="res_css/res_css_family/IntPage.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="res_css/res_css_family/demo_table.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="res_css/res_css_family/templatemo_style.css" type="text/css" />
    <script type="text/javascript" src="res_script/res_script_family/generalscript.js"></script>
    <script type="text/javascript" src="res_script/res_script_family/mainpagefunction.js"></script>
    <link rel="stylesheet" href="res_components/table/footable/css/footable.core.standalone.css" type="text/css"/>
    <link rel="stylesheet" href="res_components/table/footable/css/footable.editing.css" type="text/css"/>
    <link rel="stylesheet" href="res_components/table/footable/css/footable.core.filtering.css" type="text/css"/>
    <link rel="stylesheet" href="res_components/table/footable/css/footable.core.paging.css" type="text/css"/>
    <link rel="stylesheet" href="res_components/table/footable/css/footable.core.sorting.css" type="text/css"/>
    <script type="text/javascript" src="res_components/table/footable/js/footable.core.js"></script>
    <script type="text/javascript" src="res_components/table/footable/js/footable.editing.js"></script>
    <script type="text/javascript" src="res_components/table/footable/js/footable.export.js"></script>
    <script type="text/javascript" src="res_components/table/footable/js/footable.filtering.js"></script>
    <script type="text/javascript" src="res_components/table/footable/js/footable.paging.js"></script>
    <script type="text/javascript" src="res_components/table/footable/js/footable.sorting.js"></script>
    <script type="text/javascript" src="res_components/table/footable/js/footable.state.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <BODY>
    <table style="border-spacing: 0px(0px);padding:0" border=0>
      <tbody>
        <tr>
          <td style="padding:0;vertical-align:top; min-width:340px">
            <div id="templatemo_wrapper" style="min-width:340px">
              <div id="templatemo_sidebar">
                <div id="site_title" style="margin-bottom: 20px">
                </div>
                <!-- end of site_title -->
                <div class="sidebar_box" style="padding-bottom: 15px">
                  <h3 style="margin-top: 0">Специалист:</h3>
                  <span id="Ispolnitel" style="padding-bottom: 0"></span>
                  <span id="ispolnitelhide" style="display:none;">></span>
                  <span id="role"></span>
                </div>
                <div id="MainPage-sidebar">
                  <div class="sidebar_box" id="statisticdiv">
                    <h3>Статистика</h3>
                      <div class="sidebar_content" >
                        <ul id="statistic"
                        style="adding:0;padding-left:5px;margin:0;
                        list-style-type:none;">
                        </ul>
                      </div>
                  </div>
                  <div class="sidebar_box">
                    <h3>О компании</h3>
                      <div class="sidebar_content">
                        <ul id="news_box">
                          <li class="last">
                            <p style="font-weight: bold;
                            font-size: 14px;margin: 0 0 0 0;
                            padding: 0; font-color: #333">
                            </p>
                            <p>
                            </p>
                          </li>
                        </ul>
                      </div>
                  </div>
                </div>
              </div>
             </div>
          </td>
          <td id="contenttd" style="vertical-align:top;padding:0;min-width:850px;max-width:100%">
            <div id="templatemo_content">
              <div id="templatemo_menu">
                <ul>
                  <li id="MainID"><a id="mainqid" href="#">Главная</a>
                  </li>
                  <!-- class="current" -->
                  <li id="FindID"><a id="findqid" href="#">Поиск</a>
                  </li>
                  <li id="GraphicID"><a id="graphicqid" href="#">Графики</a>
                  </li>
                  <li id='ReportsID'><a id="reportsqid" href="#">Отчёты</a>
                  </li>
                  <li id='documentsid'><a href="#" id="documentsqid">Документы</a>
                  </li>
                  <li id='ImportID'><a id="importqid" href="#">Импорт</a>
                  </li>
                  <li id='InfoID'><a href="#" id="infousers">Информация</a>
                  </li>
                  <li id='CloseID'><a id="closeqid" href="#">Выход</a>
                  </li>
                </ul>
                <div class="cleaner"></div>
              </div>
              <!-- end of templatemo_menu -->
              <div class="content_box">
                <div id="MainPage">
                </div>
                <!-- Здесь добавляется таблица -->
                <table class="footable"></table>
                <div id="clear"></div>
              </div>
              <br/>
            </div>
            <div class="cleaner"></div>
          </td>
        </tr>
      </tbody>
    </table>
    <div id="templatemo_footer_wrapper">
      <div id="templatemo_footer">
        <p id="versioninfo">
        </p>
      </div>
      <!-- end of templatemo_footer -->
    </div>
  </BODY>
</html>

Код manepagefunction.js:

$(document).ready
(
    function()
    {       
        $('#MainID').click(mainidclick);
        $('#FindID').click(findidclick);
        $('#GraphicID').click(graphicidclick);
        $('#ReportsID').click(reportsidclick);
        $('#InfoID').click(infoidclick);
        $('#ImportID').click(importidclick);
        $('#documentsid').click(documentsidclick);      
        $("#CloseID").click(closeidclick);
        // Этот метод
        jQuery(function($){
            $('.footable').footable({
                "expandFirst": true,
                "columns": [
                    { "name": "id", "title": "№" },
                    { "name": "name", "title": "Ф.И.О." },
                    { "name": "district", "title": "Район" },
                    { "name": "comment", "title": "Комментарий"}
                ],
                "rows": [
                    { "id": 1, "name": "Зонов Богдан Игоревич", "district": "г. Киров", "comment": "Отсутствует СНИЛС"},
                    { "id": 2, "name": "Смирнова Кристина Андреевна", "district": "г. Киров", "comment": "Активное в 2 районах"}
                ]
            });
        });
    }
);
/*
 * Статистика на главной странице.
 */
function getApplicationStatistics()
{
    FamilyClientHighLevelSystemInformationClass.getApplicationStatistics
    (
        {
            callback : function(str) 
            {
                $("#statistic").html(str);
            },
            exceptionHandler:InvokerMethodExceptionHandler
        }   
    );
};
function getApplicationMainFormInformation(Login)
{
    FamilyClientHighLevelSystemInformationClass.getApplicationMainFormInformation
    (
        Login,
        {
            callback : function(str) 
            {
                $("#MainPage").empty();
                $("#MainPage").append(str);
            },
            exceptionHandler:InvokerMethodExceptionHandler
        }
    );
}

И при загрузке страницы появляются ошибки:

main.jsp:40 GET http://localhost:8081/FamilyC/res_components/table/footable/css/footable.core.filtering.css net::ERR_ABORTED 404
main.jsp:41 GET http://localhost:8081/FamilyC/res_components/table/footable/css/footable.core.paging.css net::ERR_ABORTED 404
main.jsp:42 GET http://localhost:8081/FamilyC/res_components/table/footable/css/footable.core.sorting.css net::ERR_ABORTED 404
main.jsp:40 GET http://localhost:8081/FamilyC/res_components/table/footable/css/footable.core.filtering.css net::ERR_ABORTED 404
main.jsp:42 GET http://localhost:8081/FamilyC/res_components/table/footable/css/footable.core.sorting.css net::ERR_ABORTED 404
main.jsp:41 GET http://localhost:8081/FamilyC/res_components/table/footable/css/footable.core.paging.css net::ERR_ABORTED 404
mainpagefunction.js:15 Uncaught TypeError: $(...).footable is not a function
    at HTMLDocument.<anonymous> (mainpagefunction.js:15)
    at j (jquery.js:3148)
    at Object.fireWith [as resolveWith] (jquery.js:3260)
    at Function.ready (jquery.js:3472)
    at HTMLDocument.J (jquery.js:3503)
Answer 1

Все было просто, подключение jQuery перенести выше нужно было и все заработало. Мастера footable отпишите пожалуйста в комментариях.

READ ALSO
Треугольник на карточке товара с фоном

Треугольник на карточке товара с фоном

Нужно сверстать вот так

160
Почему часть скрипта не выполняется с телефона?

Почему часть скрипта не выполняется с телефона?

Есть такой скрипт меняющий расположения блока при полном скролле страницы, на компьютере все работает хорошо, на телефоне выполняется только...

167
Табы с плагином SelectBoxIt

Табы с плагином SelectBoxIt

Всем привет!! Я использую плагин SelectBoxIt для стилизации элемента selectНо нужно на основе этого select сделать табы(вкладки), контент которых менялся...

157
WPF Prism Не работает RequestNavigate

WPF Prism Не работает RequestNavigate

Вобщем регистрация проходит с RegisterViewWithRegion и ничего не показывает с RequestNavigate

161