comanche / datatables-responsive Goto Github PK

The examples in the readme file point to the old folder names (1/2) instead of 1.9/1.10

The README explains about DataTables 2.x but latest release is 1.10.
https://datatables.net/download/index
https://datatables.net/blog/2014-05-01

I have set a column to false visible with datatables columndefs but they still show up in the table. How do I keep columns invisible?

Hi

I'm using dataTables-responsive on multiple subpages, each with its own datatable. dataTables-responsive is saving cookie on each page, and as a result, I get this error:

400 Bad Request

Your browser sent a request that this server could not understand.
Size of a request header field exceeds server limit.

Cookie

What do the cookies do, can I disable it on my site somehow, or maybe could you change it to use Local Storage instead? Datatables uses Local Storage as default for state saving from v1.10 (http://datatables.net/blog/2012-01-16)

Trying to use your table with BS3 and found out the pagination classes need to be applied directly to the

instead of the containing div, according to this article.

http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

I am a bit of a noob with JS so I was able to fix it by doing this in DT_Bootstrap.js.

/////////////////////////////////

$(nPaging).addClass('').append(
'

' +
'
• ' + oLang.sFirst + '
' +
'
• ' + oLang.sPrevious + '
' +
'
• ' + oLang.sNext + '
' +
'
• ' + oLang.sLast + '
' +
'
'
);

/////////////////////////////////

Just curious what the right way to do this would be.

Add an expand and collapse event that is raised when the user expands or collapses the detail row. This would allow for applications to be able to manipulate the detail row DOM via javascript. I'm currently binding to the root datatable drawCallback and doing a setTimeout. This works but is highly dependant on the user's CPU as to how smooth the DOM manipulation looks.

I'm going to update my fork to have support for this and will do a PR.

HI,

I am trying to use this plugin for all the table data representation in the web application. I ran in to this issue where, once the datatable is initialised on the corresponding class. it does not add itself to the tables in the internal dialog.

don't seem to know where the problem is.

and even the usage with JQuery ui sortable is kind of glitchy, I had similar problems with the sortable before. Is there any way where this can be optimized for JQuery UI.

or do you recommend separate datatable initialization on each table.

thanks

I am using this plugin but there not work properly if I add some rowspan in my table.. is this an issue, I know that the original from datatables.net not compatible with rowspan, but any idea for this... thanks...

This code does not work with the new data tables 1.10 preview release. 1.10 is a major update with a lot of new features and improvements. I would love to use your responsive code with 1.10.

The one error that is causing me problems right now is this: TypeError: 'undefined' is not an object (evaluating 'oSettings.aoData[iRow]._anHidden[iColumn]')

This is line 686 of data tables.responsive.js.

Any ideas on a fix?

Hi guys, really excited to use this plugin but unable to figure out how to make it work with JS-based table definitions.

How can we inject the <th data-hidden='phone' ... /> into the TH tags generated by datatables? All your examples assume html templates for the table.

E.g.:

        var tableConfig =
        {
            columns: [ // <-- NOTE: Creating columns dynamically, how to inject data-hidden='phone'?
                            { title: 'name', data: 'name' },
                            { title: 'type', data: 'type' },
                            { title: 'total time', data: 'activeDuration',  }
                        ]
            // Support for responsive datatables: https://github.com/Comanche/datatables-responsive
            autoWidth: true,
            preDrawCallback: function () {
                // Initialize the responsive datatables helper once.
                if (!self.responsiveHelper_datatable_tabletools) {
                    self.responsiveHelper_datatable_tabletools = new ResponsiveDatatablesHelper($(el), breakpointDefinition);
                }
            },
            rowCallback: function (nRow) {
                self.responsiveHelper_datatable_tabletools.createExpandIcon(nRow);
            },
            drawCallback: function (oSettings) {
                self.responsiveHelper_datatable_tabletools.respond();
            }
        };

        $(el).dataTable(tableConfig);

Thanks for any pointers!

In the README "showRowDetail" should be "showDetail" and "hideDetailRow" should be "hideDetail".

Breaks when used with the popular row grouping addon.. (I'm guessing because they both override the same callbacks?)

Is it possible to fix so they don't conflict?

Row grouping addon:
http://jquery-datatables-row-grouping.googlecode.com/svn/trunk/index.html

Thanks!

The readme for this project doesn't link to a working example page anymore. The link used 404's

I have a problem when reinitializing datatable with bDestroy, because there is no more responsive table. How to solve this?

Instead of using ID element to define each dataTable, I created it as a dataTable class and when we have multiple table using this class, responsive.datatable breaks. In an examle for dom-bootstrap.html I just added the copy of the same table and had a class dataTable for both tables. I changed the listener accordingly, if I run this sample responsive doesn't work. It seems like you have to define ID tag for each table to handle it.

First I was getting that responsiveDatatablesHelper(tableContainer, breakpointDefinition) wasn't found because the 'r' in responsive wasn't capitalized to match the functions that you guys made in datatables.responsive.js. I basically copied and pasted from your directions here on github and the typo was there. I fixed that and it gets to the function correctly now, but now I am getting "Uncaught ReferenceError: _ is not defined" on line 117 of datatables.responsive.js at the _.each line. I don't know where to go from here. am I doing something wrong?

I used the examples (ajax-bootstrap) and provided Name--Value pair but I am getting error "Requested unknown parameter '0' from the data source for row 0"

modified aoColumn as follows:
{
sTitle: "Select", "sType":"string",
mData: "id",
//aTargets : [ 0 ], // Column number which needs to be modified
bSortable: false, // Column is not sortable
// Custom render function - add checkbox
mRender : function (data, type) {
return '';
},
sClass : 'centered-cell' // Optional - class to be applied to this table cell
},
{
sTitle: "Name", "sType":"string",
mData: "name",
//aTargets: [ 4 ], // Column number which needs to be modified
sClass : 'centered-cell' // Optional - class to be applied to this table cell
}

and data is:
{
"aaData":[
{
"id": "27473",
"name": "0.537298713931095",
"accountId": "3005",
"category": "bk",
"price": "19.9",
"listedAt": "1376674836464"
},
{
"id": "27471",
"name": "Java to America 0.5371571339962922",
"accountId": "3005",
"category": "mov",
"price": "1.99",
"listedAt": "1376674836340"
}
]
}

Please let me know what I am doing wrong. Thnx

I have a click handler on table rows that redirects to the record page.
On mobile it's hard to click on the expander icon and sometimes I'm getting a row click instead of expanding the details.

I think it will be better to attach the click handler to the table cell instead of the icon:
td.on('click', {responsiveDatatablesHelperInstance: this}, this.showRowDetailEventHandler);

https://github.com/Comanche/datatables-responsive/blob/master/files/js/datatables.responsive.js#L307

Hi all, in this day i'm asking myself this:
It is possible load hide data only after selecting plus icon ?

Do Anyone have implement this feature ?

Hello!
Thanks so much for your code!
I'm using it as part of a module that I am about to release for the Drupal CMS.

It works great -- thank you very much!

One caveat I found was that when multiple <table> exist on a page (and I use "table" in the DatatTables selector), then the responsive feature works only on the first table. Columns in this table hide responsively, but the expand icon does not appear.

Any suggestions?

Best,

Rik de Boer
RdeBoer @ http://drupal.org/user/404007

Hi

I'm facing one issue with responsive [+] and [-] layout option while using dom-bootstrap with multiple table.

My first table is coming fine but when I'm using second table with small screen it's not showing [+] and [-] icon and action.

Note:- When I am creating one demo file

But I don't want to create multiple duplicate file because in single page I have to use 5-8 table.

Demo link:- http://www.getsalondeal.com/demo/admin/all-category.html

Regards
Sandy

Do you know if there is a problem when using this plugin with bStateSave ?
The first time i render the table it shows correctly, but when i reload it, the bStateSave didn't stored the hidden column.

I have DataTables initialized using an external json file and aoColumnDefs in order to display a few of my columns as checkboxes. These definitions are disregarded in the row-detail view and only the original json data is displayed (0 or 1).

When the table is static HTML as opposed to loaded via ajax, the checkboxes seem to translate to the narrow view just fine.

I have a css pseudo before class on the td element of my data table. This is being added to the span w/class columnTitle as opposed to the span w/class columnValue. This is causing the content from the psuedo class to appear before the column header when expanded.

Off the top of my head, I can't think of why all css from the original datatables td shouldn't be applied to the columnValue span. I can do a pull request with a fix if you want.

Hello. Love the idea of taking the thoroughness of "dataTables" and mixing in the concept of "Footable". I agree - after reviewing all the approaches to responsive tables, Footable seems to have nailed it! The table size responds to the browser window and with a click, one can see the information for other columns below the current row. Quite ingenious I must say.

But... when I tried using it with bootstrap tabs, I found that the resizing/hiding of columns was only working for the table on the active tab, not the inactive ones. Clicking to an inactive one showed a table withOUT hidden columns. A simple page refresh and THAT now active tab's table did just fine with Foo. But go to another tab and it's a repeat - not responsive until page refresh.

This obstacle brought me to your solution. I don't know yet if it will work better/properly with a table in multiple tabs, but I am anxious to see. However, I am having difficulties getting things going.

The only "multi-table" example I see provided uses BS2. I'm on BS3.

What I would really like is something simple like I had in Footable alone. I was able to put a single line in the Javascript to initialize Foo and then include "footable" in the class def of the table. I didn't have to use an ID either. This made for easy integration of multiple tables on the same page. I checked and learned dataTables can be init this way too (using "display" class on table and single line of JS to init).

Might you have a moment to provide a brief example under BS3 using multiple tables on a single HTML page? A complete, working example would be preferred :)

If I can get this working, I can see making a contribution as I feel it would be well worth it to have a nice looking, responsive table.

Any assistance would be appreciated. Thank you!

When using aoColumns to change the visibility of a column to false, the column still appears. When removing the datatables-responsible callbacks it works fine. Is there a way to preserve the bVisible setting? 1.10

"aoColumns": [ 
        null,
        null,
        null,
        null,
        null,
        null,
        {"bVisible":    false },
        {"bVisible":    false },
        {"bVisible":    false }
    ] ,

After updating the row data in datatables, the expand icon will no longer expand to display the data.

//update row with new data,
$('#data_table').DataTable().row(data.row_index).data(data);

//redraw table
$('#data_table').DataTable().draw();

Any suggestions?

Thanks!

How do i default the table to 5 records per page?

how can I implement "aLengthMenu" with this?

The ajax examples provided aren't working in the current version of Chrome (29) nor the development (Canary v31).

Hi Comanche,

Great plugin, thanks for the hard work. Have managed to integrate it with my datatables setup with one hickup that i'm stuck on:

I have one column which i set to data-hide="always", I would like this to be expanded by default - currently i manipulate this by doing:
if (!$( ".detail-show" )[0]){
$( ".responsiveExpander" ).trigger( "click" );
};

However when user filters or changes page, i end up with some rows showing detail and others not - i'm sure there is a slicker way of doing this and have a feeling the answer involves showDetail function - please can you help point me in the right direction??

I've tried the below with no luck.

responsiveHelper.showRowDetail(nRow);

Thanks,

Will

First of all, thanks for the beautiful plugin!
I think that it could be useful to hide cells with empty values in details view (this behaviour can be optional). If you like the idea I can make a pull request, but it's rather trivial - just adding additional check in "Loop through hidden columns and create an li for each of them"

Are you planning to support DataTables 1.10?

Thanks

I've been using your plugin and it seems to work quite well. There's however one issue I'd like your input on. When a few columns are hidden when the browser resizes, the sorting options on the hidden columns goes away. For example:

http://imgur.com/40woqnl

Now this behavior is quite natural, but I was wondering if you had any ideas on how this could be handled when the browser resizes?

I really like this software and I'd like to use it in my (commercial) project, but I'm afraid I cannot use it because it's GPL licensed.

The GPL is a copyleft license, which means that derived works can only be distributed under the same license terms.

Will it be possible to change the license to a more permissive license like the MIT (like FooTable) or BSD licenses (like DataTable)?

I could use an additional data-hide param of 'all' which would always collapse some columns is the table is way too wide, even for a desktop display.

the table filters work, but only go into focus when you click the label and not the actual element. I have tried every CSS hack I know and nothing seems to work.

I also tried taking these elements outside of the label, but can't figure out how to move the js properly. Here is my attempt in jquery.dataTables.js.

nLength.innerHTML = '<label>'+'</label>'+oSettings.oLanguage.sLengthMenu.replace( '_MENU_', sStdMenu );

I'm trying to add this to an existing application so cant post all my code, but wondering if anyone else has had this issue.

Consider the following:

<th data-hide="phone,tablet">Col 1</th>
<th data-hide="phone,tablet">Col 2</th>
<th>Col 3</th>
<th data-class="expand">Col 4</th>

If you initially load this page as a phone width (not as desktop and then resize down), the span with the + sign is not added.

Hi

I'm trying to implement dom-bootstrap, here I have checkbox. But I'm not able to implement checkbox select all and deselect all option in the page. Can you please help me.

My demo url is:-

http://www.getsalondeal.com/demo/admin/all-category.html

Regards
Sandy

In most instances, this plugin works perfect for me. However, i have a few cases where it would work better if instead of declaring the data-hide attribute based on device widths, it drops the last column in the same fashion if overflow begins to scroll.

Does anyone have a workaround similar to this already in place?

In example there's

old datatable example which references tableContainer

if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableContainer, breakpointDefinition);
}

in recent datatable same code now has

if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}

so it refers to tableElement which isn't declared.

Let me start to say I really appreciate this project.
I have one problem that I am trying to fix, but I think this will affect other users as well.

I have a hidden column in my column definitions (bVisible: false). The first one actually (column ID 0). Datatables does not create a for a hidden column. But your logic to detect which column has the expand button uses a jQuery call:

var headerElements = $('thead th', this.tableElement);

Which does not take the hidden columns into account.

This can be solved by changing this line to:

var headerElements = this.tableElement.fnSettings().aoColumns;

and an

element = element.nTh;

after the _each on line 164. This fixes the incorrect expand column.

But then the detection of which columns should be hidden and shown still fails and the column to the right of the one that should be hidden is hidden (because of the difference between th:eq(0) and column with ID 0.

Do you agree it would be best to use fnSettings().aoColumns instead of the (incomplete) $('th') in your code?

Hi,

comanche plug-in for responsive data tables is not working with Bootstrap 3. Pagination bar in the bottom right is misaligned vertically prepended with .dot like character. So .First, .Previous, .1, .2 etc comes vertically instead of all in a horizontal bar, Also because of this issue the data table is not responsive and we get horizontal scrolls. If we just replace the bootstrap.css of 2.3 it starts working. Please suggest what to do now? Your help is highly appreciated.

Regards,
Murtaza

Hi all,
i'm using this component on my personal site. When open the site with ie8 all work except the plus icon for expand row. There is another scenary, with another pc, where the plus icon doesn't shown !
Anyone had same issue ?

this is ie8 error details

'Node' not defined

dataTables.responsive.js

line:492
char: 17

Thank you in advatage ;)

I need to have the first column of my tables as a counter column (row numbers) that does not get affected by sorting (like in this datatables API example). But inserting that code snippet in the into the fnDrawCallback function breaks the responsive behavior. The columns are hidden alright, but are not expandable anymore.

        fnDrawCallback : function (oSettings) {
            responsiveHelper.respond();


            /* Need to redo the counters if filtered or sorted */
            if ( oSettings.bSorted || oSettings.bFiltered )
            {
                for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
                {
                    $('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
                }
            }

        }   

.

Would you be able to put up an example that uses the DataTables scroller extension: http://next.datatables.net/extensions/scroller/

Could you also put up an example that shows filtering on each column (search text input in footer).

Thank you,

-Rhon

Hello, I'm trying to implement this plugin and work with datatables, but i have no lucky, and the examples don't have the part of the function of js, anyone have a full example that i could see and try in my work? Tranks

In the example in the README it should be ResponsiveDatatablesHelper instead of responsiveDatatablesHelper

The icon appears when there is less expanded the details, but I discovered that the file datatables.responsive.css on line 7 has the following code:
table.has-columns-hidden> tbody> tr.detail show-> td span.responsiveExpander{
     background: url ('../img / minus.png') no-repeat 5px center;
}

But for the correct function would be:
table.has-columns-hidden> tbody> tr.detail show-> td span.responsiveExpander{
     background: url ('../img / minus.png') no-repeat 5px center;
      padding-left: 32px;
     cursor: pointer;
}

I do not know if I can open a Pull Request to correct the problem.

It's not an issue. It's just an idea for those who use FontAwesome in their projects. If you want to add Retina support and don't want to use 2 extra images you can replace background-images in the expander with FontAwesome icons. Something like this:

table.has-columns-hidden > tbody > tr > td > span.responsiveExpander {
    cursor: pointer;
    padding-left: 22px;
}

table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:before{
    content: "";
    font-family: FontAwesome;
    font-size: 20px;
    color: #bbb;
    left: 0;
    top: -3px;
    position: absolute;
}

table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:hover:before, table.has-columns-hidden > tbody > tr > td > span.responsiveExpander:focus:before{
    color: #ccc;
}

table.has-columns-hidden > tbody > tr.detail-show > td span.responsiveExpander:before {
    content: "";
}

table.has-columns-hidden > tbody > tr > td:first-of-type  *{
    position: relative;
}

Of course, it's just a starting point. You can modify it to suit your needs

This may not be an issue and I'm just a total newb programmer but I've been trying to figure out how to add complex headers to my respsonsive datatable like this https://datatables.net/examples/advanced_init/complex_header.html

Whenever I add the colspan to my html it works for the table when it's fullscreen but when the table collapses it breaks everything. Is it possible to implement this and if so what is the correct way?