Remove "results per page" on a table

edited June 25, 2020 in Questions
What's the recommended way to display this table without the "show 10 results per page, showing rows 1-3 of 3"?  For this table we don't need it.  



  • Pat VachonPat Vachon 💎💎💎
    edited June 25, 2020
    put a sticky note over it.
  • Pat VachonPat Vachon 💎💎💎
    edited June 25, 2020
    Sorry. In a sour mood. You could get rid of the drop down portion by setting the table component to show all records.

    The Showing Rows bit would have to be removed w/ javascript. Not sure how though. Irvin or Menachem proabably know how.
  • Rob HatchRob Hatch 🛠️ 
    edited March 5, 2018
    Actually removing the whole line at the bottom is possible with a bit of targeted CSS.   Here is how. 

    1.  Add a class to the table.   


    Note: This is superbank release.  Your arrangement of table properties may be different. 

    2. Add a CSS resource with this code. 
    /* hide footer in table */
    .hidetablefooter .nx-list-footer {
    The components of the table footer each are in thier own div,  which you could target instead of hiding the whole .nx-list-footer element. 

    There you go... 

  • edited January 27, 2017
    YES!! Thank you Rob!
  • edited February 25, 2019
    Rob, how would you just get rid of the 'Show 10 <object name> Per Page' part?  Our object names are ugly, and this case is going in a customer facing community.  I want to keep the 'Showing Rows 1-1 of 1' part.  

    Real need is to hide the object name, or say something more customer friendly.  Possible?

  • edited February 1, 2017
    I second this. :)

    I simply want to replace the object name with "Rows" in every case. We can fudge that with JQuery, but it'd be nicer not to have to.
  • edited February 23, 2018
    Qite simple to do so.
    On the table go Display/Advanced CSS Class and assign a CSS having this content:
    .hidetablefooter .nx-list-footer-left {      display:none; }
    Here is a sample page:
    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">   <models>
          <model id="Account" limit="50" query="true" createrowifnonefound="false" adapter="" type="" sobject="Account">
                <field id="Name"/>
                <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Name" state="filterableoff" inactive="true" name="NamesToFilter" operator="contains"/>
                <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="OwnerId" state="filterableoff" inactive="true" name="OwnerId"/>
          <model id="User" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="User">
                <field id="Username"/>
                <field id="Name"/>
          <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="false" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" buttonposition="" mode="read" uniqueid="sk-mVT_A-83" instantfilters="true" emptysearchbehavior="query" cssclass="hidetablefooter">
                <field id="Name"/>
                <action type="edit"/>
                <action type="delete"/>
             <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
                <view type="standard"/>
             <renderconditions logictype="and"/>
             <cssitem location="inline" name="hidetablefooter" cachelocation="false">.hidetablefooter .nx-list-footer-left {
          <styleitem type="background" bgtype="none"/>

    Hope this helps
  • edited February 25, 2019
    Thanks, that was perfect!
  • edited September 3, 2019
    More please...?

    The display reads something like:

    Show [10 v] <objects> Per Page (Load More) Showing Rows 1-4 of 4 First Previous 1 2 Next Last

    Using the technique above, you can hide the entire display using .nx-list-footer.

    With .nx-list-footer-left, everything from Show through More) is hidden.
    With .nx-list-footer-center, Showing Rows 1-4 of 4 is hidden.
    With .nx-list-footer-right, the First...Last paging controls are hidden.

    Another thread indicated that .nx.list.loadmore will hide the  (Load More) button.

    Are there any other elements to the table footer? Is there a way to change the object name display other than changing the Label in the Sobject definition? A generic "Rows" would work, as would hiding the '<objects> Per Page> element.

  • edited September 3, 2019
    Found my own method in an onPageLoad javascript that builds a generic object History table:

    skuid.model.getModel('History').labelPlural = pHOBJECT+' History Rows';

    This modifies the "<objects> Per Page" text in the table footer.

  • nsns
    edited November 9, 2017
    Hello, I noticed in tables that  have more than 50 records, the Load More function doesn't show up. I even changed the pagination to Show All rows. As you can see in the footer, I'm only showin 1-50 but no option to view more. 

    Any ideas on how I can view all records on the table using the CSS provided: 
    .hidetablefooter .nx-list-footer-left {
        display:none;  }

  • edited February 23, 2018
    Hello Roger

    I think you misunderstood the purpose of the css provided. The only thing this piece of css does is hiding the "Load more rows" button for a table. It doesn't change the tables behaviour in any way. If you use the show all property like you did, all rows contained in the model will show up in a page. If you don't see all the data needed, you probably don't load all the rows into the models in the first place.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!