Rectangle 27 6

The example below uses AngularJs and Datatable. The filtering, pagination and sorting are working good.

<script src="angular-datatables/dist/angular-datatables.min.js"></script>

Hope this can help you.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="angular-datatables/dist/angular-datatables.min.js"></script>   
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
    </head>
    <body>
        <div ng-app="AngularWayApp" ng-controller="AngularWayCtrl">
            <table datatable="ng" class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="name in names" ng-click="testingClick(name)">
                        <td>{{name.Name}}</td>
                        <td>{{name.City}}</td>
                        <td>{{name.Country}}</td>
                      </tr>
                </tbody>
            </table>

            <script>
                var app = angular.module('AngularWayApp', ['datatables']);

                app.controller('AngularWayCtrl', function($scope, $http)
                {
                    $http.get("http://www.w3schools.com/angular/customers_mysql.php").success(function (response)
                    {
                        $scope.names = response.records;
                    });

                    $scope.testingClick = function(name)
                    {
                        console.log(name);
                    };
                });
            </script>
        </div>
    </body>
</html>

nice one. its helped me a lot.

jquery - ng-repeat sorting arrow not working in javascript datatables ...

jquery angularjs html5 datatables angular-directive
Rectangle 27 1

Honestly, the 'search' : 'applied' is your best bet, especially if you get into pagination. You can look at this for other ideas though if you really want to add something in your sum() function: Retrieving row data after filtering JQuery Datatables

javascript - How to get searched rows from Datatables at API function ...

javascript datatables
Rectangle 27 4

I've read this discussion that might help you: basically you must inizialize de table with these options;

"bServerSide" : false,
"sAjaxSource" : "path to your ajax source"

In this way, the data get loaded only once and all the filtering is done by the client.

Than if you want to load more data you can use fnReloadAjax. You can read this discussion about the topic, i think it has all the answers you need.

EDIT - With pipeline you can avoid making frequent calls to the server for pagination only (if you filter data a call is made to the server). If you want to get the data to the server only once and then filter data clientside you must disable server side processing (white the above options set). If you disable server-side processing you can provide the user a way to get additional data from the server with "fnReloadAjax" (for example a button).

What i still don't get, do you need to get some other data from the server or whatever the user gets first is ok?

EDIT 2 - if you don't wan't to call the server, you can avoid using AJAX at all by enhancing an existing table. Just create the html servers side like this:

<table width="770" border="0" id='rdr_home' class='tablesorter'>
        <thead>  
          <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
          </tr>
        </thead>
        <tbody>
    <?php 
    foreach ($rows as $row){
    //echo all rows here (be careful as for each row you must 
    //have as many <td> as the column: no colspan!
    }
    ?>
        </tbody>
    </table>
oTable = $('.tablesorter').dataTable({
        "aaSorting": [[2, "asc"]],
        "bAutoWidth": false,
        "bFilter": false,
        "sDom": 'T<"clear">lfrtip',
        "aoColumns": [
                    { "sType": "html" },
                    { "sType": "html" },
                    null
                ],
        "oLanguage": {
            "sUrl": "templates/rhuk_milkyway/dataTables/media/language/it_IT.txt"
        }
    });

With this you have pagination and filtering server side

EDIT 3 - in the case you have mentioned (datatables takes care of paginetion but no calls for filtering) you must add som extra plugin, i think. You must disable filters and sorters of datatable at inizialization fase like this;

"bFilter": false,
    "bSort": false,

And then use another component for sorting filtering what's on screen. You can take a look here for a solution with sorting and filtering: http://silverwareconsulting.com/index.cfm/2008/10/2/jquery-autofiltering-table

(personally i don't like the idea of filtering by clicking, but you can build on this if you want to use somethin more to your taste), in any case you can't use datatables built-in filters if you allow server side pagination

So, I guess my use case should be serviced if I have set cache size as 1 in the pipelining example.

So the use case is something like this - For the search criteria, the total result set could be 10K rows. Because its very large, we want to fetch it 100 rows at a time (pagination). But I want to allow the user to sort just these 100 rows at a time. So, pagination needs to be done server-side but not the sorting. Sorting just needs to be done on the current page.

remember that pipelining only avoids calls to the server for pagination, not for filtering.

jquery Datatables - how to achieve Server side fetching and Client sid...

jquery sorting jquery-plugins datatables
Rectangle 27 39

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:

  • Display data from almost any data source
  • DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  • Rock solid - backed by a suite of 2600+ unit tests

What does "Non-destructive DOM interaction" mean? Having a tough time understanding why this is novel or a feature, and what it covers/guarantees.

it is not free software I think, mmm, a problem with it.

seems these cool DataTables grids are not editable, and if you need it - you have to pay for the editable version: editor.datatables.net/purchase/index

Best dynamic JavaScript/JQuery Grid - Stack Overflow

javascript jquery grid
Rectangle 27 1

The best way I have found to using datatables in a rails app is this:

ajax-datatables-rails gem to get the the JSON datatables expects when using server side pagination and searching.

There are other gems that make it easier to generate the JSON datatables need If you don't want to go through the trouble of making a new class like in the RailsCast. You can find them here

ruby gem that prepares data for datatables - Stack Overflow

ruby-on-rails ruby json gem datatables
Rectangle 27 1

The best way I have found to using datatables in a rails app is this:

ajax-datatables-rails gem to get the the JSON datatables expects when using server side pagination and searching.

There are other gems that make it easier to generate the JSON datatables need If you don't want to go through the trouble of making a new class like in the RailsCast. You can find them here

ruby gem that prepares data for datatables - Stack Overflow

ruby-on-rails ruby json gem datatables
Rectangle 27 0

$(this) did not work for me, probably because I am using TypeScript. So I used a different approach to get the JQuery element for the table wrapper and the DataTables API. This has been inspired by the answer of BitOfUniverse and tested with DataTables 1.10.

'drawCallback': (settings: any) => {
      // hide pager and info if the table has NO results
      const api = new $.fn.dataTable.Api(settings);
      const pageCount = api.page.info().pages;

      const wrapper = $('#' + settings.sTableId).closest('.dataTables_wrapper');
      const pagination = wrapper.find('.dataTables_paginate');
      const info = wrapper.find('.dataTables_info');

      pagination.toggle(pageCount > 0);
      info.toggle(pageCount > 0);
 }

javascript - DataTable : How to hide the pagination and only show it a...

javascript jquery datatables jquery-datatables
Rectangle 27 0

The number of displayed pages is hardcoded in sample code given by dataTables (and in the jquery-datatables-rails gem).

I submitted a pull-request to use the same behavior as "full_numbers" pagination.

$.fn.dataTableExt.oPagination.iFullNumbersShowPages = 3;
$('#my-table').dataTable({
    "bPaginate": true,
    "sPaginationType": "bootstrap",
    "bScrollCollapse": true
});

Rails Bootstrap Datatables - Stack Overflow

ruby-on-rails datatable twitter-bootstrap
Rectangle 27 0

I couldn't replicate your problem using Navigation with text input pagination plug-in, it doesn't even appear in server-side processing mode.

However, your code works when "sPaginationType": "input" is removed or replaced with one of the default modes, for example "sPaginationType": "full_numbers".

Consider updating to the latest version of DataTables (1.10.7) and switching from Navigation with text input pagination plug-in to one of the default pagination modes or another pagination plug-in.

$(document).ready(function() {
  // AJAX emulation for demonstration only
  $.mockjax({
      url: '/test/0',
      responseTime: 200,
      response: function(settings){
         this.responseText = {
            draw: settings.data.draw,
            data: [
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ],
              [ "Tiger Nixon", "System Architect", "Edinburgh", 61, "2011/04/25", "$320,800" ]
            ],
            recordsTotal: 1000,
            recordsFiltered: 1000
         };
      }
  });

  $('#example').dataTable({    
    "scrollY":        "168px",
    "scrollCollapse": false,
    "jQueryUI":       true,
    "bRetrieve" : true,
    "bDestroy" : true,

    "bPaginate": true,
    "bSearch":false,
    "bFilter": false, 
    "bInfo": false,
        
    //"sPaginationType": "input",
    "sPaginationType": "full_numbers",
    "bLengthChange" : true,        
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "/test/0",
        "type": "GET"
    }    
  });
      
});
<!DOCTYPE html>
<html>

<head>
<meta charset="ISO-8859-1">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>  
<link href="//cdn.datatables.net/plug-ins/1.10.7/integration/jqueryui/dataTables.jqueryui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/pagination/input.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.7/integration/jqueryui/dataTables.jqueryui.js"></script>
  
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">

<thead>
   <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
   </tr>
</thead>

<tfoot>
   <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
   </tr>
</tfoot>

<tbody>
</tbody>
</table>
</body>
</html>

jquery - Pagination buttons triggering ajax even when disabled - dataT...

jquery ajax datatables datatables-1.10
Rectangle 27 0

Why not simply use jquery?

$("td").addClass('editable');

Update: On second thought: It would be better to put this jquery snippet in the draw event of dataTables so it works too when pagination changes and the table is redrawn.

javascript - DataTables: Add class to table cells, but not table heade...

javascript jquery datatables jquery-datatables
Rectangle 27 0

Pretty quick to start with and integrates easily with bootstrap or semantic ui framework. Also has very nicely customizable sort fields and search as well getting data from an api but that part needs specific data response format from your api and unless you don't have much control over that it's harder to implemented pagination for example.

Another option is https://github.com/matfish2/vue-tables-2. I found this one harder to start with because it needs some jsx setup but it's structured better than the first one above.

Honestly I would prefer one of the options from above or if you find another one in form of a component on awesome-vue (a list of vue components on github). By using such custom components you get rid of 2 libraries (jquery and datatables) and they play nicely with the reactive nature of vue.

Unless you don't need pdf exports, stylesheet exports or fancy print stuff, then I don't see why you should use datatables.

thanks for the answer, but i do need to export files(excel etc) and the documentation and tools of jQuery DataTable is larger by far then any other library or framework, so i would really like to integrate Vue.js with jQuery DataTable for the advanced component technology of Vue and the powerful jQuery DataTable for using high quality of table features.. the answer i'm looking for is confirmation for my Vue.js & DataTable(jquery plugin) example above and some good implementation advices... thanks :)

It seems fine to me so far. As long as it's straight forward and easy to understand it's perfectly fine. I would suggest a couple of adjustments regarding the finding of the table. Either use $refs instead of id's or generate some unique id (e.g current date) this.tableId=new Date().getTime().toString()in the created hook and have <table :id="tableId"> This will assure that you can have as many tables as you wish per page without having id selection issues. Also you have to deal with updates/edits. Other than that seems fine to me

thank you very much :)

using Vue.js & DataTable(jquery plugin) - Stack Overflow

datatables vue.js