datatables / plugins

Plug-ins for DataTables

DataTables Plugins

This repository contains a collection of plug-ins for the jQuery DataTables table enhancer. These plug-ins are feature enhancing for the DataTables library, adding extra options to core functionality such as additional sort algorithms, API methods and pagination controls. The plug-ins should not be confused with DataTables "extensions" which are more significant software libraries which add additional features to DataTables.

This repository holds the following plug-in types for DataTables (among others):

• Sorting
  • Type based
  • Custom data source based
• API
• Filtering
  • Type based
  • Row based
• Internationalisation translations
• Type detection
• Pagination

Please refer to the DataTables plug-in documentation for details on how to use these plug-ins.

Internationalisation

In the case of i18n Plugins, we ask that you don't create a pull request and instead make use of the management system that we have in place for this on our website. Changes there will be synced up to this repo.

plugins's Issues

fnSetFilteringDelay does not work with DataTables 1.10

Plugin fnSetFilteringDelay does not work anymore with DataTables version 1.10 due to changes in the api.

Following code does the same what the plugin was supposed to do and works with DataTables 1.0:

https://github.com/xmojmr/component.io/blob/0.2.0/js/main.js#L395-L420

It would be nice if the fnSetFilteringDelay was working also with 1.0 but there are several questions in the current design that made me to propose just a copy/paste hack instead of pull request. Especially:

• DataTables has already support for this behavior built-in in the form of function _fnThrottle(fn, freq). But it is used only in the server-side processing mode
• the key searchFn function which is the real handler is not visible to the outside

Language Options with Font-Awesome

Put Icons as the Language Setting

It should further be noted, that by using the language options, you can add in font-awesome icons into elements like pagination. Some .css adjustments need to be made, but I just finished testing this method and works great for my project.

DataTable Initialization

When using the dataTables.bootstrap.js, I created a script to initialize the defaults for all dataTables created within my project that runs after the bootstrap integration and font-awesome integration that changes the language options to clear the text and use font-awesome icons.

jQuery(document).ready(function ($) {
    "use strict";
    $(function () {

        //  INITIALIZE DATATABLES DEFAULT SETTINGS
        $.extend(true, $.fn.dataTable.defaults, {
            'destroy': true,
            'paging': true,
            'info': true,
            'searching': true,
            'ordering': true,
            'orderMulti': true,
            'autoWidth': true,
            'pageLength': 20,
            'processing': true,
            'pagingType': 'full_numbers',
            'language': {
                'paginate': {
                    'first': '<i class="fa fa-chevron-left"></i><i class="fa fa-chevron-left"></i>',
                    'last': '<i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i>',
                    'previous': '<i class="fa fa-chevron-left"></i>',
                    'next': '<i class="fa fa-chevron-right"></i>'
                }
            }
        });
    }); // Document Ready
}); // jQuery Ready

Alternatives Using Stylesheets

Of course, this is not the only way to accomplish. While using the dataTables.fontAwesome.css stylesheet, the same thing could have been done by using the methods in the stylesheet with content as it was with the sorting icons. I personally chose to just use the original method in the dataTables.fontAwesome.css for my sorting design.

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute;
    right: 8px;
    line-height: normal;
    display: block;
    font-family: FontAwesome;
}

table.dataTable thead th.sorting:after {
    content: "\f0dc";
    color: @twilight;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de";
    color: @brand-primary;
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd";
    color: @brand-primary;
}

Just wanted to throw this bit of info out there incase it was not already previously mentioned before.

Contact me for questions or suggestions.

Thanks!

DataTables 1.10 with Bootstrap 2(.3.2)

Updated to DataTables 1.10 and the latest bootstrap-datatables files and pagination did not work. Had to change these 3 lines starting from 110 in bootstrap-datatables.js to work with Bootstrap 2.3.2:

Change:

attach(
    $(host).empty().html('<ul class="pagination"/>').children('ul'),
    buttons
);

To:

attach(
    $(host).empty().html('<div class="pagination"><ul/></div>').find('ul'),
    buttons
);

Hope this helps.

Integration with Twitter Bootstrap 3+

The latest twbs introduces new structure for pagination and input elements which breaks the integration.

Bootstrap plugin bug

On server side processing, oSettings._iDisplayLength could be string (I don't know if it is always a string).

When _iDisplayLength is string, the function $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) at dataTables.bootstrap.js fails

An improvement could be:

/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
    oSettings._iDisplayLength = parseInt(oSettings._iDisplayLength); // DISID. Convert _iDisplayLength to int to avoid errors when server side returns it as string
    return {
        "iStart":         oSettings._iDisplayStart,
        "iEnd":           oSettings.fnDisplayEnd(),
        "iLength":        oSettings._iDisplayLength,
        "iTotal":         oSettings.fnRecordsTotal(),
        "iFilteredTotal": oSettings.fnRecordsDisplay(),
        "iPage":          oSettings._iDisplayLength === -1 ?
            0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
        "iTotalPages":    oSettings._iDisplayLength === -1 ?
            0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
    };
};

Ability of ellipses not built in DataTables 1.10?

The ellipses.js plugin is deprecated because it should be built in DataTables 1.10.

"Note that DataTables 1.10 has this ability built in. As such, this plug-ins has been marked as deprecated, but may still be useful for if you are using an old version of DataTables."

But me (and others) haven't found the ability yet to change the gap between the number of pagination buttons in DataTables 1.10. Am I missing something?

If the ability is not built in, can someone show me a workaround solution (or head me in the right direction) to gain control over the following:

Change this:
Previous 1 2 3 4 5 ... 10 Next

into (for example) this:
Previous 1 ... 10 Next

Hope someone can help me out.

Thanks in advance!

Bootstrap TableTools styles

The mentioned styles are conflicting with bootstrap. Can't they be under some subclass?

bootstrap pagination looks bad

there doesn't appear to be a rule to override .dataTables_wrapper .dataTables_paginate .paginate_button -- I had to set display: inline (instead of inline block) and padding: 0 (was 0.5em 1em) to make it look better.

Incorrect example for page.jumpToData() plugin

The example is incorrect for this particular plugin, it says that the usage of the plugin is:

var table $("#example").DataTable();
table.page.jumpToData(0, "Allan Jardine");

After attempting to get the plugin to work with that, i took a look at the Firefox Developer console debugger and found that the actual params should be the other way around:

table.page.jumpToData("Allan Jardine", 0);

ip-address filter : add IPv6 support

Hi

The ip-address.js sortering plugin is very well for IPv4 but it doesn't supports the IPv6 addresses.

Could you add this support ?
The tests can be done with
::
::10
::1
2001::1

Thanks a lot !

greater than a number

Add the ability for it to search a numeric column for values greater than/ less than a specific number.

Update bootstrap2 plugin

Hi,
We updated our project to datatables 1.10 and the new API (which is really great, lot of work though).

We are still using bootstrap2 (it is a big project, updating to bootstrap3 will demand a substantial effort so it is not planned right now), it would be great to maintain the bootstrap2 plugin integration for company in the same situation.

Thanks !

Search field too big on small displays

The search field overflows out of the DataTables container on very small resolutions (<400px)
The culprit seems to be a hardcoded width:

div.dataTables_filter input {
     width: 16em;
}

Edit: I'm using the Bootstrap 3 plugin, the above code is from dataTables.bootstrap.css

Commit is breaking change. 48930f65dc94f1ff159325619d631dfd82a7cae4

Getting Uncaught TypeError: Cannot read property 'pageButton' of undefined

ever since commit 48930f6

Dev: Move the jPagination integration into the paging plug-ins

Hard to See Links in the Active Row

Selecting a table row makes it active and currently turns the row a blueish color which makes it very difficult to see html links that may be embedded in the row. In most cases the active row text is white though the links are not.

Not sure if this is the best way to solve it though it seemed to work for me.

/*
 * TableTools styles
 */
...
.table tbody tr.active td a:link,
.table tbody tr.active td a:visited,
.table tbody tr.active td a:hover,
.table tbody tr.active td a:active {
     color: white;
}

Bootstrap pagination bug

I was on Datatables 1.10.2 with the bootstrap theme (v3) for datatables from that time (everything worked fine) and today I upgraded to 1.10.4 with the current bootstrap theme (v3) for datatables.

Now, the pagination is not renderer correctly, there is no <ul><li> but just <a> for each page inside a <span>. Bootstrap can't theme those <span><a> automatically.

Please add releases to the project

This project is listen in bower packages, but has no releases.

It is possible to put particular commit into bower.json dependencies, but it would be much better and more logical to have release tags.

Foundation: Clicking the … in the pagination breaks things

Clicking the … on the pagination turns it into NaN and the table shows no data.

can't get pagination to work

I am currently trying to incorporate a dataTable into a page (using WET template). Now I have done everything stated on the WET template documentation, yet my pagination still does not work. Can you tell me what is wrong with my code?

thank you

Add sorting support for "dd-MMM-yyyy" formatted dates

Please see http://stackoverflow.com/q/16449934/1430996 and http://datatables.net/forums/discussion/comment/48220#Comment_48220

Foundation missing processing CSS

The Foundation css file is missing the css for processing.

Should the dateParts[0] be parsed to Int?

page.jumpToData()

Is it possible to have this plugin do a >= search on the data itself, so that you can search on partial matches?

Also, would it be possible to get it to put the searched for row to the top and allow prev/next navigation to still work?

Foundation Integration - pagination styles no longer working in Foundation v5.4.1

I recently upgraded from Foundation 5.3.2 to 5.4.1 and this seems to have broken the pagination UI. The styles are missing. All that shows is an unstyled (unseparated by spaces):

FirstPrevious12345NextLast

Looks like a JS issue as well as CSS.

Note: I'm using Datatables 1.9.x

Row Styling Not Applied When Feeding In a js object Table Config

Hello:

Copied directly from the dataTables jquery-ui example page, I have reconstructed the example using the same resources on jsfiddle for a demo. Additionally, I have created another dataTable, feeding in an object containing the datasource and column data. You can observe that the table styling between the top table and bottom table are different, specifically the rows.

http://jsfiddle.net/cdaringe/afrm9ce2/
or, in a single file, http://pastebin.com/8ZRT4tYS

Bootstrap 3.1 issue with filter input width

This is in reference to integration/bootstrap/3/dataTables.bootstrap.css.

Bootstrap 3.1 added width: auto to .form-inline .form-control (for @media(min-width:768px)) which overrides the width of 16em set for the filter input in the css integration file. I think this could be fixed by simply adding the .form-control class to the div.dataTables_filter input css selector? That is, it would become:

div.dataTables_filter input.form-control {
  width: 16em;
}

I should note that this also happens the with the length select element, so perhaps this behavior is expected/desired?

Bootlint errors when using processing:true

When I run the bootlint bookmarklet on a datatable with bootstrap styles applied and processing:true, it's showing some bootstrap syntax errors.

Bootlint is a HTML linting tool for Bootstrap.

Bootlint: http://blog.getbootstrap.com/2014/09/23/bootlint/ and https://github.com/twbs/bootlint
JSFiddle example page: http://fiddle.jshell.net/zh3ud3zn/1/show/light/

New table based on selected rows

Add an option to create a separate table that shows you only the selected rows. One table with all the rows and another one with only the selected rows

Outdated date-dd-MMM-yyyy.js

The date-dd-MMM-yyyy.js extension doesn't seem to be up to date with the new camelCase options and only adds function if the hungarian notation is used.

Uncaught Type Error

Uncaught TypeError: Cannot read property 'defaults' of undefined on dataTables.bootstrap.js:2

Uncaught TypeError: undefined is not a function index:164

index:164 content: $('#users_table').dataTable();
http://pastebin.com/5dWV99i6

Mouse over

Hi

In this example, https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3

mouse hover don't have any effect, so this miss something.

With this line, it's working

.table tbody tr:hover td, .table-striped tbody tr:hover th {
background-color: #f5f5f5;
}

Missing First and Last Buttons in Twitter bootstrap pagination

I might be setting it up incorrectly but he code doesn't include First and Last buttons with Twitter bootstrap theme.

Popover not working as it should

Hi,

In this example:
http://hammr.co/8234009/12/problems.html

Try clicking the "submit"-link. A popover will show. Then click outside of the popover. The popover will disappear.

In regular bootstrap behaviour, the popover will be removed from the DOM. With DataTables loaded, it will not. It is still there, hidden.

This issue creates hover-effect bugs when hovering the table rows. Try opening 3 or 4 popovers, then close them. Then hover the table-rows where the popovers are supposed to be visible when they are opened, and you will see the issue.

I do not know how to fix this issue. It works as it should when I remove datatables from the equation. As in this bootstrap example (inspect the open popover and see it get removed from the DOM after being closed):
http://getbootstrap.com/javascript/#popovers

Many thanks if you guys could fix it, somehow.

Jonathan

Bootstrap3 Integration : "sFilterInput" & "sLengthSelect" doesn't work.

And I can't see them anywhere except "dataTables.bootstrap.js".

Input pagination doesn't show when retrieving data via ajax

Hi!

Just upgrading to latest version of datatables and the plugins and noticed that when the number of pages is zero (when the table is initialised), the pagination helper is hidden. When the ajax call returns, the fnUpdate is called and the pagination controls are rebuilt but the outer pagination element is not shown again.

I have fixed it by adding:

$(an).show();

after the loop is rendered in "fnUpdate". So it becomes:

            /* Loop over each instance of the pager */
            for (var i = 0, iLen = an.length ; i < iLen ; i++)
            {
                var spans = an[i].getElementsByTagName('span');
                var inputs = an[i].getElementsByTagName('input');
                spans[3].innerHTML = " of " + iPages;
                inputs[0].value = iCurrentPage;
            }

            $(an).show();

Is this acceptable or did I perhaps did something wrong?

Cheers!

Gav

Integration with Bootstrap v3.2.0 ans DT v1.10.1

I have big table in width and use Bootstrap and class .table-responsive.
I use bootstrap integration for DT.

When i'm update from bootstrap 3.0.3 to 3.2.0, than my table become large and over screen view.
Than i'm comment dataTables.bootstrap.js and table width became normal size, in screen.

So, problem in dataTables.bootstrap.js integration file.

Font Awesome and scrollX showing two sets of sorting arrows

If you have the font awesome integration css included and have scrollX set to true on the table the sorting arrows are displayed twice. I added the following to the end of the css file to fix it.

div.dataTables_scrollBody table.dataTable thead th.sorting:after,
div.dataTables_scrollBody table.dataTable thead th.sorting_asc:after,
div.dataTables_scrollBody table.dataTable thead th.sorting_desc:after {
content: "";
}

Common js integration

In bootstrap plugin (and others), we can find this code (https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/3/dataTables.bootstrap.js#L177):

 // Node/CommonJS
factory( require('jquery'), require('datatables') );

"jquery" module is easy to get (https://www.npmjs.org/package/jquery), but where do the hell the module "datatables" comes from, as DataTables is not compatible, nor available at all in CommonJS ?

bootstrap + sScrollY adds space between header and body

The file Plugins / integration / bootstrap / 3 / dataTables.bootstrap.css has the following code (lines 42-47):

table.dataTable {
clear: both;
margin-top: 6px !important;
margin-bottom: 6px !important;
max-width: none !important;
}

Because of the 6px margins, when using option sScrollY with bootstrap3, there comes a visible space between the table header and body. Setting the margins to 0px instead of 6px fixes the issue.

Foundation Integration issues on small screens

When using a small screen such as a phone, the default setup looks terrible.

The width of the table breaks out of it's parent <div class="row"><div class="small-12 column"></div></div>.

Another issue is that length and search boxes look really bad.

Bower integration

I would to install this package via bower. Is it possible?

[enhancement] Add missing bower.json.

Hey, maintainer(s) of DataTables/Plugins!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library DataTables/Plugins is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "DataTables/Plugins",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

bootstrap dropdown is not working

Hi,

I tried your bootstrap for datatables in index.html

    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10-dev/js/jquery.dataTables.min.js"></script>

This code
[code]

Action

• Action
• Another action
• Separated link

[/code] it showing blue button, when I click it, it does not work, in the console I got this error

Uncaught SyntaxError: Unexpected token < dataTables.bootstrap.js:6

Thanks, your help is appreciated.

Give user better way to extend oSettings

A pagination plugin normally consists of two methods: fnInit and fnUpdate. It would be useful to pull info out of the fnUpdate method since it is called on every page change. So for instance we could display the current page info like this: http://live.datatables.net/ogedom/1/edit

The problem comes when you modify the sDom option like this: http://live.datatables.net/ogedom/2/edit

Notice that the first example output this:

fnInit
fnUpdate 
fnInfoCallback insert stuff here

However the second example waited until after fnInfoCallback to call fnUpdate, so the extended property was undefined:

fnInit
fnInit 
fnInfoCallback undefined
fnUpdate

I managed to get around this in my plugin by creating another property to update stateful information, which I can call anytime after the object is initialized: http://live.datatables.net/ogedom/3/edit

This third example behaves as you would expect:

fnInit
fnInit 
fnInfoCallback insert stuff here
fnUpdate

Let me know if this isn't a real issue. I could just be missing some really simple way to accomplish the same thing.

Bootstrap integration - no styling for the processing element

Reported by CodeWzrd :

One thing I found missing in the dataTables.bootstrap.css is the CSS for .dataTables_processing class. The processing was not displaying when DataTables is retrieving data.

plug-in sorting date dd/mm/YYYY (date-eu)

I've testing with server-side and not works correctly

sFilterInput with 1.10 not applying as extension to standard classes

"../images/background.png" do not exist

"../images/background.png" referenced in integration/jqueryui/dataTables.jqueryui.scss and integration/jqueryui/dataTables.jqueryui.css do not exist.

https://github.com/DataTables/Plugins/search?utf8=%E2%9C%93&q=%22..%2Fimages%2Fbackground.png%22

Bootstrap integration layout issues with default dataTables CSS

I had a pretty basic standard bootstrap + font-awesome + dataTables page setup and I was having trouble with a little bit of the css. It seems like some of the default dataTables CSS was messing up the layout of the pagination button and was not being properly overridden by the integration css. I was able to fix it by adding this to the css:

/* Otherwise the search and per page used a bold font set by bootstrap */
.dataTables_length label {
font-weight: 200;
}

/* All jacked up by base dataTables CSS, pagination buttons way spread out */
div.dataTables_paginate ul.pagination li.paginate_button {
margin: 0px;
padding: 0px;
border: 0px;
white-space: nowrap;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
border: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
border: 0px;
}

language files are outdated

As mentioned in the api http://datatables.net/reference/option/language and http://www.datatables.net/manual/i18n#Ordering-of-numeric-data the keys for the language object has changed and needs to be adjusted in all language files