@using Leica.Spider.BusinessCenter.Frontend.Utils
@section styles {
    <link href="~/css/GuiTests/Content/PageStyle.css"
          rel="stylesheet" />
}

<h1 class="guiTestHeader">Table Overview - client size, large data</h1>
<input type="number" placeholder="number of records" id="numOfRecords1" value="5000" />
<input type="button" value="refresh" id="refresh1" />

<datatable id="dataTable1"
           id-field="Id"
           edit-url-template="#"
           view-url-template="#"
           server-side="false"
           mode="@DataTableMode.None"
           source-mode="@DataTableSourceMode.Javascript">

    <datatable-column field="num1">{{num1}}</datatable-column>
    <datatable-column field="num2">{{num2}}</datatable-column>
    <datatable-column field="num3">{{num3}}</datatable-column>
    <datatable-column field="num4">{{num4}}</datatable-column>
    <datatable-column field="num5">{{num5}}</datatable-column>
    <datatable-column field="num6">{{num6}}</datatable-column>
    <datatable-column field="num7">{{num7}}</datatable-column>
    <datatable-column field="num8">{{num8}}</datatable-column>
    <datatable-column field="num9">{{num9}}</datatable-column>
</datatable>
Large client-size table

<hr />
<script type="text/javascript">
    "use strict";

    var createData = function (count) {
        var data = [];
        console.log('generating %d rows of dummy data', count);
        for (let i = 0; i < count; i++) {
            data.push({
                num1: 'number 1 is ' + i,
                num2: 'number 2 is ' + (Math.floor(Math.random() * count)),
                num3: 'number 3 is ' + (Math.floor(Math.random() * count)),
                num4: 'number 4 is ' + (Math.floor(Math.random() * count)),
                num5: 'number 5 is ' + (Math.floor(Math.random() * count)),
                num6: 'number 6 is ' + (Math.floor(Math.random() * count)),
                num7: 'number 7 is ' + (Math.floor(Math.random() * count)),
                num8: 'number 8 is ' + (Math.floor(Math.random() * count)),
                num9: 'number 9 is ' + (Math.floor(Math.random() * count))
            });
        }
        return data;
    }
    var data = [];
    var fillWithData = function (count) {
        data = data.length === count ? data : createData(count);
        console.log('binding %d rows of dummy data', data.length);
        var dt = $('#dataTable1').DataTable();
        dt.clear();
        dt.rows.add(data); //in DE28594 was slow
        dt.draw();
    }
    $(function () {


        $('#refresh1').on('click', function () {
            fillWithData(parseInt($('#numOfRecords1').val()));
        })
            .trigger('click');


    });
</script>