filamentgroup / tablesaw

A group of plugins for responsive tables.
MIT License
5.48k stars 434 forks source link

Swipe table swipes only column headers #322

Closed nouvaki closed 6 years ago

nouvaki commented 6 years ago

I have a tablesaw swipe mode table . My problem is that minimap swipes header columns right but data columns are stable. I believe is something with refresh because data are being loaded dynamically on document ready. What I am doing wrong? I tried all refresh methods I found

My HTML

<div class="col-xs-12">
    <table id="MessageData" data-tablesaw-mode="swipe" data-tablesaw-minimap="" class="tablesaw  tablesaw-swipe">
        <thead>
            <tr>
                <th data-tablesaw-priority="persist"></th>
                <th data-tablesaw-priority="persist">@Resources.Views.Message.Index.ListName</th>
                <th data-tablesaw-priority="1">@Resources.Views.Message.Index.BillingName</th>
                <th data-tablesaw-priority="2">@Resources.Views.Message.Index.DateIn</th>
                <th data-tablesaw-priority="3">@Resources.Views.Message.Index.Name</th>
                <th data-tablesaw-priority="4">@Resources.Views.Message.Index.Surname</th>
                <th data-tablesaw-priority="5">@Resources.Views.Message.Index.Message</th>
                <th data-tablesaw-priority="6">@Resources.Views.Message.Index.DateSend</th>
                <th data-tablesaw-priority="7">@Resources.Views.Message.Index.Status</th>
            </tr>
        </thead>
    </table>
</div>

My javascript

 $(document).ready(function () {
        var table = $('#MessageData').DataTable({
            "processing": true,
            "serverSide": true,
            "info": true,
            "lengthMenu": [[10, 20, 50, 100], [10, 20, 50, 100]],
            "fnDrawCallback": function (oSettings) {
                if (oSettings.fnRecordsDisplay() <= oSettings._iDisplayLength) {
                    $("#MessageData_paginate").hide();
                }
                else {
                    $("#MessageData_paginate").show();
                }
            },
            "ajax":
                {
                    "url": "@string.Format("{0}",Url.Content("~/Message/AjaxGetJsonData"))",
                    "type": "POST"
                },
             "initComplete": function(settings, json) {                        
                 },
            "columns": [
                {
                    "data": "LocalBusinessBulkMessageId",
                    "orderable": false,
                    "render": function (data, type, row, meta) {
                        return '<a href="@string.Format("{0}",Url.Content("~/Message/View"))' + "/" + data + '"> <span class=\'glyphicon glyphicon-eye-open\' data-toggle=\'tooltip\' title=\'@Resources.Views.List.Index.View\'></span></a>';
                    }
                },
                { "data": "ListName", "orderable": false },
                { "data": "BillingName", "orderable": false },
                { "data": "DateInString", "orderable": false },
                { "data": "Name", "orderable": false },
                { "data": "Surname", "orderable": false },
                {  "data": "Message", "orderable": false},
                { "data": "DateStartString", "orderable": false },
                { "data": "ActiveString", "orderable": false }
            ],
            "order": [[1, "asc"]]
        });
        table.$('td').tooltip({
            "delay": 0,
            "track": true,
            "fade": 100
        });

       $('#MessageData').DataTable().ajax.reload();             // nothing happens
       jQuery(document).trigger('enhance.tablesaw');        // nothing happens
        $("#MessageData").table().data("table").refresh();   // here i get $(...).table is not a function.
    });

My js References

<script src="/Content/js/plugins/jquery/jquery-2.2.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Content/js/plugins/datatables/jquery.dataTables.js"></script>
<script src="/Content/js/plugins/datatables/dataTables.bootstrap.js"></script>
<script src="/Content/js/plugins/fastclick/fastclick.js"></script>
<script src="/Content/js/plugins/slimscroll/jquery.slimscroll.js"></script>
<script src="/Content/js/plugins/select2/select2.full.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>
<script src="/Scripts/Responsive/dataTables.responsive.js"></script>
<script src="/Scripts/Responsive/responsive.bootstrap.js"></script>
<script src="/Scripts/tablesaw.jquery.js"></script>
<script src="/Scripts/tablesaw-init.js"></script>
<script src="/Content/js/plugins/icheck/icheck.js"></script>
<script src="/Content/js/app.js"></script>
<script src="/Content/js/init.js"></script>
<script src="/Content/js/plugins/jquery/jquery-2.2.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Content/js/plugins/datatables/jquery.dataTables.js"></script>
<script src="/Content/js/plugins/datatables/dataTables.bootstrap.js"></script>
<script src="/Content/js/plugins/fastclick/fastclick.js"></script>
<script src="/Content/js/plugins/slimscroll/jquery.slimscroll.js"></script>
<script src="/Content/js/plugins/select2/select2.full.js"></script>
<script src="/Scripts/moment.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap-datetimepicker.js"></script>
<script src="/Scripts/Responsive/dataTables.responsive.js"></script>
<script src="/Scripts/Responsive/responsive.bootstrap.js"></script>
<script src="/Scripts/tablesaw.jquery.js"></script>
<script src="/Scripts/tablesaw-init.js"></script>
<script src="/Content/js/plugins/icheck/icheck.js"></script>
<script src="/Content/js/app.js"></script>
<script src="/Content/js/init.js"></script>
zachleat commented 6 years ago

Hey @nouvaki,

Have you tried the approach documented at https://github.com/filamentgroup/tablesaw/#manual-initialization-of-tablesaw-components

Sounds like it isn’t initializing correctly! I’d recommend focusing on proper init rather than refresh. If you need additional help, I’d love to see a complete reduced test case for proper debugging.

Please reopen when you have that!

Thanks, Zach