How to use TableTools to re-initialize to enable scrolling/paging on button click?

beacon5

Hi,

I'm fairly new to jQuery and very new to DataTables, so I'm not sure whether or not what I'm trying to implement is even possible or not, but I thought I'd post the question anyway.

I've added to plain text TableTools buttons above my datatable. I want these buttons to allow users to change the table from being scroll-able to paginated when they click the respective button. It's my understanding that the only way to change the scrollY and/or paging options is to re-initialize the datatable by destroying it.

I've posted my TableTools code below. The table renders based on the change event of a <select> element and that is working great. However, when you click on the 'Scroll' or 'Page' buttons, an error message that says, "Error: 'style' is null or not an object" in IE8.

As you can see in my code, the last column is hidden. When I click the other button, I get the same error message and this time the hidden column becomes visible. The table also appears to resize and cover up the TableTool buttons on this last click. While functionally this is all much worse in IE8, the browser my audience is using, it's not working well in Chrome or Firefox.

var columnArray = [
        { title: "Type", name: "Type", className: "center-align", orderable: false, data: "type", width: "5%" },
        { title: "Name", name: "Name", orderable: true, data: "name" },
        { title: "Created Date", name: "Created Date", orderable: true, data: "created_date" },
        { title: "Created Time", name: "Created Time", orderable: true, data: "created_time" },
        { title: "Node", name: "Node", orderable: true, data: "node" },
        { title: "Version", name: "Version", orderable: true, data: "version" },
        { title: "URL", name: "URL", orderable: false, visible: false, data: "url" }
    ];

    $.fn.dataTable.TableTools.defaults.aButtons = [
        {
            "sExtends": "text",
            "sButtonText": "Page",
            "fnClick": function (button, config, flash) {
                var table = $("#example").DataTable();
                var table_data = table.data();

                table.destroy();
                $("#example").empty();

                table = $("#example").DataTable({
                    data: table_data,
                    columns: columnArray,
                    dom: "T<'clear'><r>t<'row'<'col-xs-5 col-sm-5 col-md-5'i><'col-xs-7 col-sm-7 col-md-7 text-right'p>>",
                    lengthChange: false,
                    order: [1, "asc"],
                    paging: true,
                    pageLength: 5,
                    processing: true,
                    searching: false
                })
                .draw();
            }
        },
        {
            "sExtends": "text",
            "sButtonText": "Scroll",
            "fnClick": function (button, config, flash) {
                var table = $("#example").DataTable();
                var table_data = table.data();

                table.destroy();
                $("#example").empty();

                table = $("#example").DataTable({
                    data: table_data,
                    columns: columnArray,
                    dom: "T<'clear'><r>t<'row'<'col-xs-5 col-sm-5 col-md-5'i><'col-xs-7 col-sm-7 col-md-7 text-right'p>>",
                    order: [1, "asc"],
                    paging: false,
                    processing: true,
                    scrollY: "150px",
                    searching: false
                })
                .draw();
            }
        }
    ];

    $.extend($.fn.dataTable.defaults, {
        columns: columnArray,
        dom: "T<'clear'><r>t<'row'<'col-xs-5 col-sm-5 col-md-5'i><'col-xs-7 col-sm-7 col-md-7 text-right'p>>",
        lengthChange: false,
        //ordering: false,
        order: [1, "asc"],
        paging: true,
        pageLength: 5,
        processing: true,
        searching: false
    });

Here's the code that renders the table initially in the <select> element:

var table = $("#example").dataTable().api();

if (results) {
     $("#div_Results").show();

     table.clear();

     table
          .rows.add(results)
          .draw();

     if ($("#example").hasClass("display")) {
          $("#example").removeClass("display").addClass("table table-striped table-hover table-condensed table-bordered");
     }

     table.draw();
}

My web page is not public facing, so I can't link to the site. I attempted to put together a test case and while it does illustrate how the click of the buttons is working as intended, it's unfortunately not the best test case. http://live.datatables.net/sefebasu/1/edit