Jquery DataTables AJAX Default Sorting Not Working -
i'm pulling raw json in fill out datatable.
the problem things pagination , sorting don't work.
i'm not pulling info database, i'm pulling data aws.
from aws --> cache file --> json --> datatables.
my json looks so:
{ "count": 332, "data": [ { "account": "netops", "architecture": "x86_64", "block_devices": [ { "delete_on_terminate": true, "name": "/dev/sda1", "status": "attached", "volume_id": "vol-secret" } ], "ebs_optimized": false, "group_name": null, "hypervisor": "xen", "id": "i-secret", "instance_type": "m1.small"} ]} of course real result returns 323 records...
the json valid json according json lint
here use datatables:
<script> $(document).ready(function() { $('#ec2_table').datatable({ "serverside": true, "ajax": '/ec2', "columns": [ { "data": "id" }, { "data": "name" }, { "data": "architecture" }, { "data": "instance_type" }, { "data": "image_id" }, { "data": "platform" }, { "data": "state" }, { "data": "account" }, ], "lengthmenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "all"]], dom: 't<"clear">lfrtip', tabletools: { "sswfpath": "/static/js/datatables/extensions/tabletools/swf/copy_csv_xls_pdf.swf" } }); }); </script> pagination, column sorting, searching inoperative.
and jinja/html looks so:
<table id="ec2_table" class="order-column display compact" cellspacing="0" width="98%"> <thead> <tr> <th>id</th> <th>name</th> <th>architecture</th> <th>insttype</th> <th>image id</th> <th>platform</th> <th>state</th> <th>account</th> </tr> </thead> </table>
i have been looking @ datatables documentation , think problem json.
this example gave. count: isn't 1 of listed parameters datatable expected. let me know if changing json return "draw". "recordstotal", "recordsfiltered", , "data" parameters works. still learning datatables myself.
{ "draw": 1, "recordstotal": 57, "recordsfiltered": 57, "data": [ [ "angelica", "ramos", "system architect", "london", "9th oct 09", "$2,875" ], [ "ashton", "cox", "technical author", "san francisco", "12th jan 09", "$4,800" ], ... ] }
i got of work!
you need class play api ajax/json
imports system.web.script.serialization public class datatablejsonmodel public property draw integer public property start integer public property length integer public property search searchmodel public property order ordermodel() public property columns columnmodel() class columnmodel public property data string public property name string public property searchable boolean public property orderable boolean public property search searchmodel end class class searchmodel public property value string public property regex boolean end class class ordermodel public const asc string = "asc" public const desc string = "desc" public property column integer public property dir string end class end class public class datatablereturnmodel public property draw integer public property data object public property recordstotal integer public property recordsfiltered integer public property errormessage string end class public class aws public property instance_type string public property id string public property architecture string public property account string public property name string public property block_devices blockdevicemodel() public property ebs_optimized boolean public property group_name string public property hypervisor string class blockdevicemodel public property delete_on_terminate boolean public property name string public property status string public property volume_id string end class end class my html/javascript looks this.
@code viewdata("title") = "awsdatatables" end code <script> $(document).ready(function () { var table = $('#ec2_table').datatable({ "serverside": true, "ajax": { url: '/home/ec2', type: 'post', datatype: 'json', contenttype: 'application/json; charset=utf-8', data: function (d) { return json.stringify(d); }, }, "columns": [ { "data": "id" }, { "data": "name" }, { "data": "architecture" }, { "data": "instance_type" }, ], "lengthmenu": [[10, 25, 50, 100, 1000], [10, 25, 50, 100, 1000]], dom: 't<"clear">lfrtip', tabletools: { "sswfpath": "/scripts/media/js/datatables/extensions/tabletools/swf/copy_csv_xls_pdf.swf" } }); }); </script> <h2>awsdatatables</h2> <table id="ec2_table" class="order-column display compact" cellspacing="0" width="98%"> <thead> <tr> <th>id</th> <th>name</th> <th>architecture</th> <th>insttype</th> </tr> </thead> </table> and server-side controller code this.
function awsdatatables() actionresult return view() end function <httppost()> _ function ec2(d datatablejsonmodel) jsonresult dim dataresults ienumerable(of aws) = getawstestlist() dim filtereddata ienumerable(of aws) = dataresults dim output new datatablereturnmodel() 'sorting happens here if not string.isnullorempty(d.search.value) dim s string = d.search.value.tolower 'this change based on class. filtereddata = dataresults.where(function(x) x.id.tolower.contains(s) orelse x.architecture.tolower.contains(s) orelse x.name.tolower.contains(s)) end if 'ordering happens here if not isnothing(d.order) andalso d.order.length > 0 dim orderm datatablejsonmodel.ordermodel = d.order(0) if not isnothing(orderm) dim sortdirection string = orderm.dir dim columnm datatablejsonmodel.columnmodel = d.columns.elementatordefault(orderm.column) if not isnothing(columnm) andalso not string.isnullorempty(columnm.data) andalso not isnothing(gettype(aws).getproperty(columnm.data)) if sortdirection = datatablejsonmodel.ordermodel.asc filtereddata = filtereddata.orderby(function(x) gettype(aws).getproperty(columnm.data).getmethod.invoke(x, {})) else filtereddata = filtereddata.orderbydescending(function(x) gettype(aws).getproperty(columnm.data).getmethod.invoke(x, {})) end if end if end if end if output.data = filtereddata.skip(d.start).take(d.length) output.recordsfiltered = filtereddata.count output.recordstotal = dataresults.count return json(output) end function