Remove "results per page" on a table

  • 4
  • Question
  • Updated 2 years ago
  • Answered
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.  

Photo of Peter Herzog

Peter Herzog

  • 1,664 Points 1k badge 2x thumb
  • love for Skuid

Posted 4 years ago

  • 4
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,674 Points 20k badge 2x thumb
put a sticky note over it.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,674 Points 20k badge 2x thumb
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.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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 {
    display:none;
}

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... 
Photo of Peter Herzog

Peter Herzog

  • 1,664 Points 1k badge 2x thumb
YES!! Thank you Rob!
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
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?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
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.
Photo of Matthias

Matthias

  • 628 Points 500 badge 2x thumb
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">
         <fields>
            <field id="Name"/>
         </fields>
         <conditions>
            <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"/>
         </conditions>
         <actions/>
      </model>
      <model id="User" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="User">
         <fields>
            <field id="Username"/>
            <field id="Name"/>
         </fields>
         <conditions/>
         <actions/>
      </model>
   </models>
   <components>
      <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">
         <fields>
            <field id="Name"/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
         <searchfields/>
         <renderconditions logictype="and"/>
         <filters/>
      </skootable>
   </components>
   <resources>
      <labels/>
      <javascript/>
      <css>
         <cssitem location="inline" name="hidetablefooter" cachelocation="false">.hidetablefooter .nx-list-footer-left {
    display:none;
}</cssitem>
      </css>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>

Hope this helps
(Edited)
Photo of Chandra V

Chandra V, Champion

  • 6,966 Points 5k badge 2x thumb
Thanks, that was perfect!
Photo of Mike Dwyer

Mike Dwyer

  • 3,330 Points 3k badge 2x thumb
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.
Photo of Mike Dwyer

Mike Dwyer

  • 3,330 Points 3k badge 2x thumb
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.
Photo of ns

ns

  • 1,822 Points 1k badge 2x thumb
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;
}



Photo of Matthias

Matthias

  • 628 Points 500 badge 2x thumb
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.