Tuesday, 2 April 2019

JQuery Datatable with Update Panel in ASP.NET

</head>
<body>
<form runat="server">
    <asp:ScriptManager runat="server">
    ...
</form>

 <script>

    $(document).ready(function () {
        // bind data table on first page load
        bindDataTable(); 

        // bind data table on every UpdatePanel refresh
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); 
    });
 
  function bindDataTable() {
    // Apply DataTable library
    jQuery('.datatable-sortable').hide().each((index, element) => {
            jQuery(element)
                .prepend(jQuery("<thead></thead>")
                    .append(jQuery(element).find("tbody tr:first")))
                .dataTable(
                    {
                        "oLanguage": {
                            "sLengthMenu": "Show _MENU_",
                        },
                        "order": [],
                        "iDisplayLength": 20,
                        "aLengthMenu": [[-1, 10, 20, 30, 50, 100, 200], ["All", 10, 20, 30, 50, 100, 200]],
                        "fnInitComplete": function () {
                            jQuery(element)
                                .show()
                                .addClass("hover")
                                .addClass("compact")
                                .addClass("nowrap");
                        }
                    });
        });
     }
</script>

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

</body>

No comments:

SQL: Generate a range of numbers

SELECT ones.n + 10*tens.n + 100*hundreds.n + 1000*thousands.n FROM       (VALUES(0),(1),(2),(3),(4),(5),(6),(7),(8),(9)) ones(n),      (VALU...