Load SharePoint data to Tabulator table via REST, then save selected items to LocalStorage

load_sharePoint_list_items_REST_axios_to_tabulator.html

<!-- Tabulator.js styles-->
<link href="/site/wz-eva/makecard/js/tabulator.min.css" rel="stylesheet">


<!-- Custom styles-->
<style>
    .tabulator-selected .workzonecheckbox::after {
        content: 'x';
    }

    #personnelTable {
        min-height: 100px;
        background-image: url('/_layouts/15/images/gears_an.gif');
        background-repeat: no-repeat;
        background-position: center center;


    }

    .tabulator-paginator button {
        width: auto;
        min-width: auto;
    }

    #makeCardsWrapper {
        position: fixed;
        bottom: 0;
        background: #fff;
        padding: 0% 3%;
        right: 0;
        z-index: 100;
        width: 94%;
        border-top: 2px solid #999;
        box-shadow: -0px 3px 14px #999;
    }
</style>


<!-- tabulator generated table is injected here -->
<div id="personnelTable">

    Loading Records...

</div>

<!-- Button to grab selected IDs and save to local storage -->
<div id="makeCardsWrapper">
    <button class="button important" disabled id="getSelectedItems">Make <span id="getSelectedItemsNumber"></span>
        Cards</button>
</div>


<!-- Axios to load SharePoint Data, Moment.js to format dates, and Tabulator to build the table -->
<script src="/Style%20Library/js/axios.min.js"></script>
<script src="/site/wz-eva/makecard/js/moment.min.js"></script>
<script src="/site/wz-eva/makecard/js/tabulator.min.js"></script>




<script>
    // This section handles buildling the table, injecting loaded data, and hanlding interactivity.

    // Get selected IDs from list, passes them to make-multi-card.aspx
    var getSelectedItems = document.getElementById('getSelectedItems');
    var getSelectedItemsNumber = document.getElementById('getSelectedItemsNumber');


    // Event listener for button to make cards
    getSelectedItems.addEventListener("click", function (e) {
        e.preventDefault();

        var _cardsToPrint = localStorage.getItem("cardsToPrint")

        window.open("/site/wz-eva/makecard/default.aspx?cardID=multi", "_blank");
    })




    // Make the table in the DOM first, then populate with data.
    var selectedNumber;

    function makeTable() {

        var personneBuildlTable = new Tabulator("#personnelTable", {
            selectable: true,
            selectableRangeMode: "click",
            layout: "fitDataFill",
            reactiveData: true,
            data: loadedData,
            // autoColumns:true,
            pagination: "local", //enable local pagination.
            paginationSize: 100,
            paginationSizeSelector: [100, 250, 500, 1000],
            rowSelectionChanged: function (data, rows) {

                // Fire after a row selection occurs.  Creates an array of SharePoint IDs!
                var _selectedRows = []
                rows.forEach(function (_rowdetails) {
                    _selectedRows.push(_rowdetails._row.cells[1].value)
                })

                // ... and stores it in LocalStorage
                localStorage.setItem("cardsToPrint", JSON.stringify(_selectedRows))

                selectedNumber = rows.length;

                if (selectedNumber > 0) {
                    getSelectedItems.removeAttribute("disabled");
                } else {
                    getSelectedItems.setAttribute("disabled", "disabled");
                }


                rows.forEach(function (row) {
                    // console.log(getSelectedItems)

                    getSelectedItemsNumber.innerHTML = selectedNumber
                    //console.log(row._row.data.ID)
                })
            },
            columns: [
                { title: "", align: "center", headerSort: false, cssClass: "workzonecheckbox" },
                { title: "ID", field: "Id", visible: false },
                { title: "Last Name", field: "LastName", formatter: "plaintext", headerFilter: "input" },
                { title: "First Name", field: "FirstName", formatter: "plaintext", headerFilter: "input" },
                { title: "MI", field: "MI", formatter: "plaintext" },
                { title: "Unique #", field: "UniqueNum", headerFilter: "input" },
                { title: "Training Firm", field: "TrainingFirm", formatter: "plaintext", headerFilter: "input" },
                { title: "Cert. Type", field: "CertificationType", formatter: "plaintext", headerFilter: "input" },
                { title: "Training Program", field: "TrainingProgram", formatter: "plaintext", headerFilter: "input" },
                { title: "Trained By", field: "TrainedBy", formatter: "plaintext", headerFilter: "input" },
                {
                    title: "Expires", field: "ExpirationDate",
                    formatter: "datetime",
                    sorter: "date",
                    formatterParams: {
                        inputFormat: "YYYY-MM-DD",
                        outputFormat: "MM/DD/YY",
                        invalidPlaceholder: "(invalid date)",
                    }, sorterParams: { format: "YYYY-MM-DD" }

                },
                {
                    title: "Class Date",
                    field: "ClassDate",
                    formatter: "datetime",
                    sorter: "date",
                    formatterParams: {
                        inputFormat: "YYYY-MM-DD",
                        outputFormat: "MM/DD/YY",
                        invalidPlaceholder: "(invalid date)",
                    }, sorterParams: { format: "YYYY-MM-DD" }
                }
            ]
        });
    }

</script>



<script>
    // This section loads the data, and instructs the interface to create a tabulator table.
    
    // SharePoint List data source and REST query
    var personnelList = 'Personnel'
    var fullQueryTop = "/site/wz-eva/_api/web/lists/GetByTitle('" + personnelList + "')/Items?$top=1000&$skiptoken=Paged=TRUE&$select=ID,UniqueNum,Title,MI,LastName,FirstName,ExpirationDate,TrainedBy,ClassDate,TrainingFirm,CertificationType,TrainingProgram,AuthorId&?OrderBy=Created";

    // Holds REST loaded results:
    var loadedData = [];

    // This function is recursive and is called repeatedly until all paginated results are loaded into the table.
        // Recursive!
    function loadPersonnel(nextLink) {
        axios.get(nextLink)
            .then((response) => {
                response.data.value.forEach(function (items) {
                    loadedData.push(items)
                });

                // If there's another batch of results, run this function again
                if (response.data["odata.nextLink"]) {
                    console.log('Some records loaded. Going back for more records now.')
                    return loadPersonnel(response.data["odata.nextLink"])
                } else {

                    // If there's only one batch, or this is the last one, build the table.
                    makeTable();
                    return console.log("All data loaded. Make table")

                }
            })
            .then((response) => {
                console.log('Recording Loading Function Complete');
            }).catch(function (err) {
                alert("There was an error loading this data: " + err);
                console.error(err);
            });
    };

    // Kicks off the above function
    loadPersonnel(fullQueryTop);
</script>