Serenity: Dashboard Simple Table with paging

[stixoffire]

I have in my dashboard several simple tables - I am open to using slick grid if need be. I have 4 to 6 of these to implement on the dashboard page.

I have this in my cshtml file

       <div class="box-body no-padding">
@if (Model.CompletedOrdersList.Count > 0)
{
     <table class="table table-striped">

            <tr>
            <th style="width: 80px">Order Number</th>
            <th style="width: 100px">Customer Name</th>
            <th style="width: 80px">Order Due Date</th>
            <th style="width: 100px">Sales Person</th>
          </tr>
@foreach (Jobber.JobOrder.Entities.OrdersRow item in Model.CompletedOrdersList)
 {
        <tr>
            <td style="width: 80px">@item.OrderNumber</td>
            <td style="width: 100px">@item.CustomerCompanyName</td>
            <td style="width: 80px">@item.OrderDueDate</td>
            <td style="width: 100px">@item.SalesPersonFirstName</td>
        </tr>
}
    </table>
}
    </div><!-- /.box-body -->

In my DashBoardPage I have this

using (var connection = SqlConnections.NewFor<MyOrder>())
 {
        var completedOrderData = connection.Query<MyOrder>("sp_Reports_Order_By_OrderCompleted_Status",
             commandType: System.Data.CommandType.StoredProcedure);
        model.CompletedOrdersList = (List<MyOrder>)completedOrderData;
 }

I have an issue because one field in the database it is a string but in the row it is an enum and it declares it cannot parse Status = "My String" which is what is the datatype stored in the db.
I would like to get that field and I would also like to implement paging - and the samples with paging on the simple tables do not seem to function anyone who could assist me I would appreciate it.

[wldkrd1]

See #1610

[stixoffire]

@wldkrd1 - No disrespect intended - I am looking here https://www.gitbook.com/book/volkanceylan/serenity-guide/details issues/questions - while this is not an issue it is a question. The simple table examples in the SimpleTables.cshtml under AdminLTE - the paging does not page any new data at all. Going to AdminLTE - their sample is not paging anything either.

I know my java is old as 2000 ,and my typescript is new as can be. So I am just looking to be pointed in the right direction - with an example - my lists can show up - but how to implement paging I do not know - I see the code for the page buttons - understood - how to make the data source respond with the next page is not.

Also on the issue of handling the parse issue - am I doing this correctly - I used the stored procedure example to get the data but that is not working - any ideas how to parse it with in the code ?

[awesomegithubusername]

Well for paging, you can use any of the tables plugins (JqGrid, DataTables, SlickGrid...) or even PagedList.Mvc.

[stixoffire]

@awesomegithubusername I downloaded both the DataTables and also the PagedList.MVC with Nuget. I had some trouble with DataTables as I am not entirely sure how to incorporate it into the cshtml file -
I know where to put the source script identifiers and src paths but as for the remaining code.

from here I have an example : DataTables-Pagination

But Should I use this in the same location - or does serenity have away of mapping the table that this could be placed in the serenity.core.js ??

<script type="text/javascript"String>
    $(document).ready(function() {
        $('#example').dataTable( {
            "pagingType": "scrolling"
        } );
    } );
</script>

I will have multiple tables on the dashboard - an I am trying to maintain consistent look and feel - along with not rigging it like a backyard mechanic special as someone else will need to work with this after I am done.

[awesomegithubusername]

For DataTables, try this:

yourfile.cshtml:

@{
    ViewBag.Title = "Test";
}

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>


<div class="box">
    <div class="table-responsive mailbox-messages">
        <table id="DataTableTestAjax" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>id</th>
                    <th>Field1</th>
                    <th>Field2</th>
                    <th>Field3</th>
                </tr>
            </thead>
        </table>
    </div>
</div>


<script>
              $(document).ready(function () {

                  $.extend(true, $.fn.dataTable.defaults, {
                      column: {
                          render: $.fn.dataTable.render.text()
                      }
                  });
                  var table2 = $('#DataTableTestAjax').DataTable({


                     // dom: "rt",

                      "ajax": {

                          "url": "/Test/ListTest",
                          "type": "GET",
                          "datatype": "json"
                      },

                      "columns": [
                             { "data": "id" },
                             { "data": "field1"},
                             { "data": "field2" },
                             { "data": "field3" },
                      ],
                });
              });

</script>

Your controller:
```c#
public JsonResult ListTest()
{

using (var connection = SqlConnections.NewFor<MyOrder>())
    {
       var completedOrderData = connection.Query<MyOrder>("sp_Reports_Order_By_OrderCompleted_Status",
         commandType: System.Data.CommandType.StoredProcedure)
         .ToList();

          var ListTest = completedOrderData.Select(
            a => new
            {
                a.id,
                a.field1,
                a.field2,
                a.field3,

            });

return Json(new { data = ListTest }, JsonRequestBehavior.AllowGet);
    }

}

```

[awesomegithubusername]

For IPagedList:

Your controller:
```c#
using PagedList;

//
public object Test(int? page)
{

using (var connection = SqlConnections.NewFor<MyOrder>())
    {
        var completedOrderData = connection.Query<MyOrder>("sp_Reports_Order_By_OrderCompleted_Status",
         commandType: System.Data.CommandType.StoredProcedure)
 .ToList();

    var pageNumber = page ?? 1; 
        var OnePageOfOrders = completedOrderData.ToPagedList(pageNumber, 25); 


        return View("~/yourView.cshtml", OnePageOfOrders);
    }

}

your view:
```cshtml

@model PagedList.IPagedList<OrderRow>
@using PagedList.Mvc

@{
    ViewBag.Title = "test";
}
//

<div class="box-body no-padding">

    @if (Model.Count > 0)
    {
        <table class="table table-hover table-striped">
            <tbody>

                @foreach (var order in Model)
                {

                    <tr>

            <td style="width: 80px">@order.id</td>
                        <td style="width: 100px">@order.field1</td>
                        <td style="width: 80px">@order.field2</td>
                        <td style="width: 100px">@order.field3</td>

                    </tr>

                }
             </tbody>
    </table>


    }
    else
    {
        <p>No orders.</p>
    }


    @if (Model.PageCount > 1)
    {
        @Html.PagedListPager(Model, page => Url.Action("Test", new { page }))
    }
</div>

[stixoffire]

@awesomegithubusername Wow- Thanks that helps me tremendously as I am learning Razor, MVC, and my Java stuff was last used almost 15 years ago..

[cryptic-ai]

I recommend throwing this on the wiki :+1: