Jquery-datatable 脚本在 Mapael Map 嵌入后不起作用

Question

我正在尝试为世界地图实现以下模板： https://rawgit.com/neveldo/jQuery-Mapael/2.2.0/examples/basic/legend_plotted_cities_areas.html 到具有 jQuery 数据表的现有模板中。

但是我只设法在同一个html页面上加载了两个函数(地图或表格(中的一个。如何在同一个 html 页面上运行这两个函数？

</div><!-- br-mainpanel -->
<!-- ########## END: MAIN PANEL ########## -->
<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/popper.js/popper.js"></script>
<script src="../lib/bootstrap/bootstrap.js"></script>
<script src="../lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
<script src="../lib/moment/moment.js"></script>
<script src="../lib/jquery-ui/jquery-ui.js"></script>
<script src="../lib/jquery-switchbutton/jquery.switchButton.js"></script>
<script src="../lib/peity/jquery.peity.js"></script>
<script src="../lib/highlightjs/highlight.pack.js"></script>
<script src="../lib/datatables/jquery.dataTables.js"></script>
<script src="../lib/datatables-responsive/dataTables.responsive.js"></script>
<script src="../lib/select2/js/select2.min.js"></script>
<script src="../js/bracket.js"></script>
<script>
    $(function () {
        'use strict';
        $('#datatable1').DataTable({
            responsive: true,
            language: {
                searchPlaceholder: 'Search...',
                sSearch: '',
                lengthMenu: '_MENU_ items/page',
            }
        });
        $('#datatable2').DataTable({
            bLengthChange: false,
            searching: false,
            responsive: true
        });
        // Select2
        $('.dataTables_length select').select2({ minimumResultsForSearch: Infinity });
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"
        charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js" charset="utf-8"></script>
<script src="../../js/jquery.mapael.js" charset="utf-8"></script>
<script src="../../js/maps/france_departments.js" charset="utf-8"></script>
<script src="../../js/maps/world_countries.js" charset="utf-8"></script>
<script src="../../js/maps/usa_states.js" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        $(".mapcontainer").mapael({
            map: {
                name: "world_countries",
                defaultArea: {
                    attrs: {
                        stroke: "#fff",
                        "stroke-width": 1
                    }
                }
            }, ....

Answer 1

它现在可以工作了。我不得不删除以下行：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>