Knockout and datatables initComplete option

demarily · May 2017

Currently I can do this with datatables alone but my goal is to move this over to knockout so that I can use databinding to pass row data to modals. Here are my datatable options...

   `var dataTableSettings = {
        jQueryUI: true,
        processing: true,
        paging: true,
        retrieve: true,
        pagingType: 'full_numbers',
        language: {
        infoEmpty: 'No paycards found...',
        processing: '<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>'
    },
    ajax: {
        url: '/Get',
        dataSrc: ''
    },
    initComplete: function (settings, json) {
        ko.applyBindings(new PaycardViewModel(json), document.getElementById("main"));

        var columnNumber = 13;
        // Show tabs for the datatable. 
        $('#tabs').tabs({
            // Handle setting the names of the tabs.
            create: function (e, ui) {
                $.each($('.assignments-tab'), function () {
                    setAssignmentTabName(this, table, columnNumber);
                });
            },
            // Handle filtering the datatable based on the tab the user has clicked on.
            activate: function (e, ui) {
                var status = $(ui.newTab[0].firstChild).data('status');
                switch (status) {
                    case 'All':
                        table.column(columnNumber).search('').draw();
                        break;
                    default:
                        var regex = '^' + status + '$';
                        var updatedTable = table.column(columnNumber).search(regex, true, false).draw();
                        $.each($('.assignments-tab'), function () {
                            setAssignmentTabName(this, updatedTable, columnNumber);
                        });
                        break;
                }
            }
        });
    }
}`

My goal is to hide the tabs and show the spinner until the ajax call is complete and the table is drawn. My end goal is to click a row icon that passes the row data to a modal that can process that row data. Thank you for reading this question!

bindrid · May 2017

Note exactly sure what you are saying but you may be hurting yourself in what it appears you are trying to do.

There is a known bug that affects html, jquery and datatables specifically that if you create the datatable in a hidden (display:none) its going to show up messed up.
I happened to create a demo of this for StackOverflow at http://jsbin.com/dufeli/edit?output

If you look at that demo, tab 2 and three are hidden while tab 1 is not. All tables are created at the same time. Look at the difference between tab one and the other two tabs.

In much abbreviated form, when I created my datatable handler, it went along these lines.

starting with the table container hidden

start a modal "one moment please
run ajax outside of datatable (implemented deferred and promise to control timing)
create view model (fortunately, DataTable can actually handle data in the form of a knockout view model)
just before creating the table, make it visible
create datatable from data fetched above
turn off modal (because this modal is mostly transparent, it does not prevent the datatables from being formed correctly)

bindrid · May 2017

by the way, for my datatable viewmodel, I use http://coderenaissance.github.io/knockout.viewmodel/ it creates viewmodel down to the cell level. I like it a little bit better than the mapping plugin link on the knockout site.

demarily · May 2017

Thank you @bindrid! Sorry for my lack of explanation but i let me show you an example of my html.

    <div id="pnlAssignments" runat="server">
        <div id="tabs">
            <ul id='tabs-section' style='display: none'>
                <li><a href="#tabs-0" class="assignments-tab" data-status="All">All</a></li>
                <li title="Not Billed"><a href="#tabs-1" class="assignments-tab" data-
status="Not Billed - Secondary">Secondary</a></li>
                <li title="Not Billed"><a href="#tabs-2" class="assignments-tab" data-
status="Not Billed - Added">Added</a></li>
                <li title="Not Billed"><a href="#tabs-3" class="assignments-tab" data-status="Not Billed - Regular">Regular</a></li>
                <li><a href="#tabs-4" class="assignments-tab" data-status="Amount Billed less than amount paid">Amount Billed less than amount paid</a></li>
                <li><a href="#tabs-5" class="assignments-tab" data-status="Multi Line Item has exception">Multi Line Item has exception</a></li>
                <li><a href="#tabs-6" class="assignments-tab" data-status="Missing Signed Paperwork">Missing Signed Paperwork</a></li>
                <li><a href="#tabs-7" class="assignments-tab" data-status="Quickbooks Name Not Mapped">Quickbooks Name Not Mapped</a></li>
                <li><a href="#tabs-8" class="assignments-tab" data-status="Signed Paperwork not validated">Signed Paperwork not validated</a></li>
                <li><a href="#tabs-9" class="assignments-tab" data-status="Negative Paycard">Negative Paycard</a></li>
            </ul>

            <div id="tabs-0"></div>
            <div id="tabs-1"></div>
            <div id="tabs-2"></div>
            <div id="tabs-3"></div>
            <div id="tabs-4"></div>
            <div id="tabs-5"></div>
            <div id="tabs-6"></div>
            <div id="tabs-7"></div>
            <div id="tabs-8"></div>
            <div id="tabs-9"></div>

            <div id="dropdowns" style="display: none">
                <label>Signed Document Type:</label>
                <select id="cbSignedDoc" class="ctrl-space"></select>
                <label>Client:</label>
                <select id="cbClient" class="ctrl-space"></select>
                <label>Vendor:</label>
                <select id="cbVendor" class="ctrl-space"></select>
                <label>Paycard Type:</label>
                <select id="cbType"></select>
            </div>

            <div class="spacer-20"></div>

            <table id="InvoiceTable" class="display">
                <thead>
                    <tr class="ui-state-default">
                        <th>LineItemId</th>
                        <th>Assignment</th>
                        <th>Stored Days</th>
                        <th>Recovery Date</th>
                        <th>Release Date</th>
                        <th>Exception Date</th>
                        <th>Client</th>
                        <th>Vin</th>
                        <th>Vendor</th>
                        <th>Vendors Invoice Date</th>
                        <th>Type</th>
                        <th>Vendor Fee</th>
                        <th>Client Fee</th>
                        <th>Exception Reason</th>
                        <th>Signed Docs</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody data-bind="dataTablesForEach: vmData, dataTableOptions: settings">
                    <td data-bind="text: LineItemId"></td>
                    <td data-bind="text: Assignment"></td>
                    <td data-bind="text: StoredDays"></td>
                    <td data-bind="text: RecoveryDate"></td>
                    <td data-bind="text: ReleaseDate"></td>
                    <td data-bind="text: ExceptionDate"></td>
                    <td data-bind="text: Client"></td>
                    <td data-bind="text: Vin"></td>
                    <td data-bind="text: Vendor"></td>
                    <td data-bind="text: VendorsInvoiceDate"></td>
                    <td data-bind="text: Type"></td>
                    <td data-bind="text: VendorFee"></td>
                    <td data-bind="text: ClientFee"></td>
                    <td data-bind="text: ExceptionReason"></td>
                    <td data-bind="text: SignedDocs"></td>
                    <td data-bind="text: Actions"></td>
                </tbody>
            </table>

I create the body with the columns: [ data, render ] option. Exception reason is what is counted into each of the tabs. I create one table but use the tabs activate function to search and put the count of each found item into each corresponding tab. The tabs are mapped to the exception reason column. Additionally, the modal is outside the tabs as well. I only use tabs to show each exception reason in the table with search and to display a count of how many of each exception are in the tabs.

demarily · May 2017

Oh and i'm using this custom binder to create the table body.

https://datatables.net/forums/discussion/comment/109990/#Comment_109990

allan · May 2017

Could you link to the page showing the issue please. I'm not clear on what is actually going wrong with the above.

Allan

Knockout and datatables initComplete option

Knockout and datatables initComplete option

Answers

Howdy, Stranger!

Categories

DataTables

Knockout and datatables initComplete option

Knockout and datatables initComplete option

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables