# Add Real jQuery Tabs for each table

**URL:** <https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077>\
**Category:** Show & Tell\
**Created:** [March 4, 2017, 11:12pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077 "2017-03-04T23:12:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DanielYoun21557](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@DanielYoun21557](https://forums.knack.com/u/DanielYoun21557)\
**Post date:** [March 4, 2017, 11:12pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/1 "2017-03-04T23:12:29Z")

</div>

Hi,

&nbsp;

I had posted before but didn't get it working when loaded via Knack's AJAX, worked fine with a page load.

&nbsp;

And it was covering multiple jQuery/Bootstrap Mods so now split for just jQuery Tabs and working correctly which ever way the page loads and I will add the other things Individually too:

&nbsp;

So basically add the below to your custom JS:

&nbsp;

$('\<link rel="stylesheet" href="[https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css](https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css)" type="text/css" media="screen" /\>\<link rel="stylesheet" href="[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css)" type="text/css" media="screen" /\>').insertBefore('#knack-dist\_1');

var fwg\_js\_files = ['[https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js](https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js)', '[https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js](https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js)', '[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js)'];  
LazyLoad.js(fwg\_js\_files, function () {

&nbsp;

$(document).on( 'knack-scene-render.any', function(event, view, records) {   
var tableLoops = 0;   
   
$('.kn-table').each (function (index, element) {  
var tableCount = $('.kn-table').length;   
var recordCountTexts = $(this).find(".kn-entries-summary").text();  
var recordCountTextsSplit = recordCountTexts.split("of");  
var recordCountTotalText = recordCountTextsSplit[1];  
var recordCountTotal = $.trim(recordCountTotalText);   
tableLoops++;   
if (tableCount \> 1) {   
var iconClassName = $(this).find('.kn-table-table \> tbody \> tr:first \> td:first').find('i').attr('class');   
var childID = $(this).attr("id");  
var childName = $(this).find('.view-header \> h2').text();  
if ($("#tabs").length === 0) {   
$('.kn-table').first().before('\<div id="tabs"\>\<ul\>');  
}  
var parentID = $(this).parent().attr('id');  
if (parentID === 'tabcontent-' + childID) {  
} else {  
$('#kn-' + view.key).find('#tabs \> ul').append('\<li\>\<a href="#tabcontent-' + childID + '"\>\<i class="'+ iconClassName +'" style="margin-right: 0.4em"\>\</i\>' + childName + ' (' + recordCountTotal + ')' + '\</a\>\</li\>');   
$('#kn-' + view.key).find('#tabs').append('\<div id="tabcontent-' + childID + '"\>');   
$(this).appendTo('#tabcontent-' + childID + '');

}  
if (tableLoops === tableCount) {   
jQuery( "#tabs" ).tabs();  
tableLoops = 0;  
}   
}  
});

});  
   
   
});

&nbsp;

&nbsp;

&nbsp;

&nbsp;

And then add the below to your custom CSS:

#tabs {  
 margin: 3px;  
 border: none !important;  
}

.ui-tabs-panel {  
 border: 1px solid #aaa !important;  
}

.ui-widget-header {  
 border: none !important;   
 background: none !important;  
}

.kn-content #kn-app-menu li.active a {  
 background: #fff !important;  
 color: #000 !important;  
}

ul.ui-tabs-nav li, ul.ui-tabs-nav li a {  
 background: #074376 !important;  
 color: #fff !important;  
}

ul.ui-tabs-nav li:hover, ul.ui-tabs-nav li a:hover {  
 background: #2D6CA2 !important;  
 color: #fff !important;  
}

ul.ui-tabs-nav li.ui-state-active, ul.ui-tabs-nav li.ui-state-active a {  
 background: #fff !important;  
 color: #000 !important;  
 outline: none !important;  
}

ul.ui-tabs-nav li.ui-state-active:hover, ul.ui-tabs-nav li.ui-state-active a:hover {  
 background: #fff !important;  
 color: #000 !important;  
 outline: none !important;  
}

.ui-tabs .ui-tabs-nav {  
 padding: 0 !important;  
}

&nbsp;

&nbsp;

It will work on any scene when there is more than one table, so if you want it to work everywhere there is more than one table then just copy and paste without modifying.

You can of course add a scene to the 'knack-scene-render.any" part above in place of the ".any" and then duplicate for the scenes you want to use it on only.

It also uses an icon from the first column of each of the tables in each tab as the icon on the tab shown just before the text, I will add a request for Knack to add an Icon option to the table setup page under options so you could use that in future with an update on the code.

It also shows the number of records in the tab after the text which is the total record not just the ones currently showing based on paging, again this can be modified easily.

&nbsp;

&nbsp;

&nbsp;

&nbsp;

Thanks

&nbsp;

Dan

---

<div class="post-metadata">

**Author:** ![RyanWade37549](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@RyanWade37549](https://forums.knack.com/u/RyanWade37549)\
**Post date:** [September 10, 2020, 3:33pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/2 "2020-09-10T15:33:48Z")

</div>

Just tried this out, and it works great! &nbsp;Is there anyway to hide the title of the table below the tab without losing it on the tab itself?

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [September 10, 2020, 1:34am UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/3 "2020-09-10T01:34:07Z")

</div>

Minor tweak to get the right number of total records:

```
var recordCountTotal = Knack.models[$(this).attr('id')].data.total_records
```

---

<div class="post-metadata">

**Author:** ![PhilWesley67576](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/philwesley67576/32/157_2.png) [@PhilWesley67576](https://forums.knack.com/u/PhilWesley67576)\
**Post date:** [August 15, 2020, 8:17pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/4 "2020-08-15T20:17:45Z")

</div>

Awesome, thanks for your work on this Brad and Daniel. Looking forward to adding this in. Appreciated 👍

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [August 15, 2020, 6:33am UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/5 "2020-08-15T06:33:59Z")

</div>

Started tooling with this for a project and got it working again.&nbsp; Needed some updates to reflect the newer Knack selectors for tables, and grabbed the recordCountTotal directly from each Knack.model data instead (sometimes tables don't display the summary).&nbsp; Haven't tested with icons in the tables yet, but the same CSS still works.

Big thanks to 8968668048&nbsp;for sharing this a few years ago.

```
$('<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css" media="screen" /><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" media="screen" />').insertBefore('#knack-dist_1');

var fwg_js_files = ['https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'];

LazyLoad.js(fwg_js_files, function () {
    $(document).on( 'knack-scene-render.any', function(event, view, records) {
        var tableLoops = 0;
        $('.kn-table.kn-view').each (function (index, element) {

            var tableCount = $('.kn-table.kn-view').length;
            var recordCountTotal = Knack.models[$(this).attr('id')].data.total_records
            tableLoops++;

            if (tableCount > 1) {
                var iconClassName = $(this).find('.kn-table-table > tbody > tr:first > td:first').find('i').attr('class');
                var childID = $(this).attr("id");
                var childName = $(this).find('.view-header > h2').text();
                if ($("#tabs").length === 0) {
                    $('.kn-table').first().before('<div id="tabs"><ul>');
                }
                var parentID = $(this).parent().attr('id');
                if (parentID === 'tabcontent-' + childID) {
                } else {
                    $('#kn-' + view.key).find('#tabs > ul').append('<li><a href="#tabcontent-' + childID + '"><i class="'+ iconClassName +'" style="margin-right: 0.4em"></i>' + childName + ' (' + recordCountTotal + ')' + '</a></li>');
                    $('#kn-' + view.key).find('#tabs').append('<div id="tabcontent-' + childID + '">');
                    $(this).appendTo('#tabcontent-' + childID + '');
                }
                if (tableLoops === tableCount) {
                    jQuery( "#tabs" ).tabs();
                    tableLoops = 0;
                }
            }
        });
    });
});
```

---

<div class="post-metadata">

**Author:** ![PhilWesley67576](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/philwesley67576/32/157_2.png) [@PhilWesley67576](https://forums.knack.com/u/PhilWesley67576)\
**Post date:** [July 3, 2020, 8:36pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/7 "2020-07-03T20:36:48Z")

</div>

This thread stopped about a year ago, thats a shame. Has anyone developed this further?

---

<div class="post-metadata">

**Author:** ![PhilWesley67576](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/philwesley67576/32/157_2.png) [@PhilWesley67576](https://forums.knack.com/u/PhilWesley67576)\
**Post date:** [July 10, 2019, 1:54am UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/8 "2019-07-10T01:54:11Z")

</div>

@DanielYoung this is awesome, great work. Clearly a master of jQuery/JS

Works well, except for some reason that I can't figure. the var **recordCountTotal** isn't rendering any records.

Any ideas?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![RyanWade37549](https://avatars.discourse-cdn.com/v4/letter/r/b2d939/32.png) [@RyanWade37549](https://forums.knack.com/u/RyanWade37549)\
**Post date:** [July 2, 2019, 8:36pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/9 "2019-07-02T20:36:02Z")

</div>

Any updates on this?

---

<div class="post-metadata">

**Author:** ![AndrewMats32904](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/andrewmats32904/32/661_2.png) [@AndrewMats32904](https://forums.knack.com/u/AndrewMats32904)\
**Post date:** [May 14, 2019, 2:57am UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/10 "2019-05-14T02:57:27Z")

</div>

Very interested in this. Has it progressed any further?

---

<div class="post-metadata">

**Author:** ![RobbieWana82321](https://avatars.discourse-cdn.com/v4/letter/r/f6c823/32.png) [@RobbieWana82321](https://forums.knack.com/u/RobbieWana82321)\
**Post date:** [August 23, 2018, 12:22am UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/11 "2018-08-23T00:22:59Z")

</div>

First, thank you Dan for sharing this code!

&nbsp;

Now, if anyone is struggling to get this to work on embedded knack pages, here is what _finally_ worked for me. :)

At the end of the first line of Javascript code, make sure you update **insertBefore('#knack-dist\_1')** to match the embedded div ID of your particular page. If you're unsure what the div ID is, check the 'Embed Code' snippet that you copy & paste:

For example, my&nbsp;div ID above&nbsp;is&nbsp; **knack-dist\_3** , so my first line of Javascript code now reads:

$('\<link rel="stylesheet" href="[https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css](https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css)" type="text/css" media="screen" /\>\<link rel="stylesheet" href="[https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css)" type="text/css" media="screen" /\>').insertBefore('# **knack-dist\_3**');

&nbsp;

Cheers!

---

<div class="post-metadata">

**Author:** ![Eli47780](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@Eli47780](https://forums.knack.com/u/Eli47780)\
**Post date:** [March 20, 2018, 8:23pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/12 "2018-03-20T20:23:29Z")

</div>

This would be an AMAZING feature that should be built into Knack itself! I've been looking for a way to do this for over a year.

I tried to use this code with the Beta theme and it creates an extra tab for the table itself as shown below. Does anyone know how to adjust this code to include the table under the initial tab?

---

<div class="post-metadata">

**Author:** ![RogerKyle61123](https://avatars.discourse-cdn.com/v4/letter/r/9fc29f/32.png) [@RogerKyle61123](https://forums.knack.com/u/RogerKyle61123)\
**Post date:** [March 9, 2018, 7:01pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/13 "2018-03-09T19:01:16Z")

</div>

&nbsp;This is a great share.&nbsp; I'm having an issue that I can't figure out with this.&nbsp; If my record count is less than 10, then the count is not showing up on the tab.&nbsp; Can anyone help resolve this?

---

<div class="post-metadata">

**Author:** ![AjayGupta71893](https://avatars.discourse-cdn.com/v4/letter/a/7cd45c/32.png) [@AjayGupta71893](https://forums.knack.com/u/AjayGupta71893)\
**Post date:** [August 22, 2017, 2:49pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/14 "2017-08-22T14:49:33Z")

</div>

Found the solution of my problem. Instead of&nbsp;jQuery( "#tabs" ).tabs(); in the above code add the below jquery cookie. This simple stores the last active tab as a cookie and when you go back direct you to the last tab you were on.&nbsp;

jQuery( "#tabs" ).tabs({  
 active : $.cookie('activetab'),  
 activate : function( event, ui ){  
 $.cookie( 'activetab', ui.newTab.index(),{  
 expires : 10  
 });  
 }  
 });  
}  
})&nbsp;

---

<div class="post-metadata">

**Author:** ![AjayGupta71893](https://avatars.discourse-cdn.com/v4/letter/a/7cd45c/32.png) [@AjayGupta71893](https://forums.knack.com/u/AjayGupta71893)\
**Post date:** [August 21, 2017, 6:39pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/15 "2017-08-21T18:39:38Z")

</div>

Hi

Thank you for the wonderful share. I have just one problem and so far unable to fix.&nbsp;

If you have multiple tabs on one page and user post something or click&nbsp;back. The page starts with 1st tab not the last tab user was at. This could be annoying for users as they expect to go back on last active tab.

Can Anyone point me in the right direction to somehow log the last active tab url in browser memory and when user post something or click back button, it loads the last active tab instead of the first tab.

Thanks&nbsp;

---

<div class="post-metadata">

**Author:** ![Marc97063](https://avatars.discourse-cdn.com/v4/letter/m/e480ec/32.png) [@Marc97063](https://forums.knack.com/u/Marc97063)\
**Post date:** [August 18, 2017, 1:33pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/16 "2017-08-18T13:33:47Z")

</div>

Thanks Dan!

---

<div class="post-metadata">

**Author:** ![DanielYoun21557](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@DanielYoun21557](https://forums.knack.com/u/DanielYoun21557)\
**Post date:** [August 15, 2017, 7:14am UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/17 "2017-08-15T07:14:04Z")

</div>

Hi Marc,

&nbsp;

I have been waiting for the new Theme to come out of Beta and become stable which I thought would be a few weeks but I guess with holidays it explains why it has been months, once stable I will redo using Bootstrap classes direct.

&nbsp;

Thanks

&nbsp;

Dan

---

<div class="post-metadata">

**Author:** ![Marc97063](https://avatars.discourse-cdn.com/v4/letter/m/e480ec/32.png) [@Marc97063](https://forums.knack.com/u/Marc97063)\
**Post date:** [August 14, 2017, 9:11am UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/18 "2017-08-14T09:11:50Z")

</div>

Hi Daniel,

Thanks for sharing this great script.

It works like a charm with the 'old' theme designs, but I'm unable to get work with the new beta theme.

Any thought on how the fix this problem?

Thanks,

&nbsp;

Marc

---

<div class="post-metadata">

**Author:** ![DanielYoun21557](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@DanielYoun21557](https://forums.knack.com/u/DanielYoun21557)\
**Post date:** [March 4, 2017, 11:57pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/19 "2017-03-04T23:57:36Z")

</div>

Hi Brad,

&nbsp;

Pics added to the main post, just got to solve one issue which is when you add a new record via the modal it updates the "Showing x of y" but I cannot find a call to hook in to so I can update the total in the tab.......

&nbsp;

Thanks

&nbsp;

Dan

---

<div class="post-metadata">

**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\
**Post date:** [March 4, 2017, 11:42pm UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/20 "2017-03-04T23:42:40Z")

</div>

Fantastic, thanks for sharing Dan.

Got any screenshots you could share here?

Thanks

Brad

---

<div class="post-metadata">

**Author:** ![Adam3](https://avatars.discourse-cdn.com/v4/letter/a/dec6dc/32.png) [@Adam3](https://forums.knack.com/u/Adam3)\
**Post date:** [January 5, 2023, 4:04am UTC](https://forums.knack.com/t/add-real-jquery-tabs-for-each-table/10077/21 "2023-01-05T04:04:26Z")

</div>

Thought I’d resurrect this one - as the code doesn’t seem to be working for me… anyone manage to get this to work recently? Thanks!