Footable rows do not display

Question

Columns display correctly in footable but rows do not show up. I see that data is correctly coming in as the paging shows right number of pages according to the number of rows, but the rows do not show up. This page correctly shows my problem. But the solution mentioned in the comments did not work for me. Following are my code snippets:

Header:

    <!--Footable https://cdnjs.com/libraries/jquery-footable -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.standalone.css" rel="stylesheet" type="text/css"/>
    <!--JS package CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
    <!--JS packages-->
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!--Footable https://cdnjs.com/libraries/jquery-footable -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.filtering.min.js" type="text/javascript"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.4/footable.bootstrap.min.css">

<div id = "example_class" style="margin-left: 17rem; margin-top:2rem">
   <table id="example" class="data-table" data-paging="true"></table>
</div>

<script>
var ft_init_options = {
            columns: {{=XML(columns)}},
            rows: {{=XML(rows)}},
            paging: {
                enabled: true
            }
        };
        var ft = FooTable.init('#example', ft_init_options);
</script>

As mentioned in the above link, it could be the order of the files that are included in the page. But I could not get it right. Kindly help! TIA

Answer 1

This worked:

    <!--Footable https://cdnjs.com/libraries/jquery-footable -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.standalone.css" rel="stylesheet" type="text/css"/>
    <!--Font Awesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <!--JS package CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
   
    {{include 'web2py_ajax.html'}}

    <!--JS packages-->
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!--Footable https://cdnjs.com/libraries/jquery-footable -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.min.js" type="text/javascript"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.filtering.min.js" type="text/javascript"></script>
    <!--chart-->
    <script charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.9/highcharts.js"></script>