Búsquedas recientes

No hay búsquedas recientes

[Guide Tip] Add sorting to your tables in Guide

image avatar

Amy Gracer

Publicado 10 ene 2020

You can add sorting to your HTML tables in guide using the Jquery TableSorter plug-in. Although this script includes many options and customizations, only basic sorting is described below for simplicity. 
 
I used the download and documentation provided on the following site: Sorting Tables with Tablesorter. There are many other resources as well. Review the documentation and download the tablesorter-master.zip. 
 
Now you can modify your Help Center.
  1. First, edit your theme and add the following plug-in assets:
    • jquery.tablesorter.js
    • theme.blue.css (or whatever theme you choose)

    To learn how to add assets, see Using your own theme assets. 

  2. Next you need to instruct Zendesk to use the tablesorter plug-in for all of your tables.
    1. Edit your theme. 
    2. Open the template document_head.hbs.
    3. Under your stylesheet links, add the following lines, and save.  
      <script src="{{asset 'jquery.tablesorter.js'}}"></script>

      <link rel="stylesheet" href="{{asset 'theme.blue.css'}}">

  3. Now under assets, open your Script.js file, and add the following: 
    //table sort
    $(function(){ $('table').tablesorter();
    theme: 'blue' });

    This will apply sorting to all tables.

  4. At this point, tables will sortable, but there will be no visual indication that the sorting is available. To add these visual cues, you must apply the tablesorter class your table as follows: 
    <table class="tablesorter tablesorter-blue">

    Notice the sorting arrows in the column headers. 

     

 
 

0

11

11 comentarios

Fecha
    Más recientes

      Iniciar sesión para dejar un comentario.

      ¿No encontró lo que buscaba?

      Nueva publicación