Welcome to TalkGraphics.com
Results 1 to 2 of 2
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Lightbulb Data Table with Filter, General Search & Column Dropdowns

    @Davora was looking for a local website Search capability - https://www.talkgraphics.com/showthr...state-listings.

    I offered a couple of suggestions that were fairly painless to implement in Xara directly but these had severe limitations.

    I have been a long time advocate of the free datatable.js jQuery extension that allows 'proper' HTML table data to be manipulated.
    Xara finally introduced SmartTables in v15 to address a severe lack in the presentation of tabular data.
    While powerful, they fail to conform to HTML <table> definitions and so results in a HTML maelstrom of poor semantic content that does little for those relying on screenreaders. I consider Accessibility the right of all users and designers need to meet these basic needs.

    Previously I created a large 1000+ row table of Xara-specific key presses and action, collated from a variety of source and personal experience.
    I stopped updating the information at v16.1 but a lot is still valid. I did add Smart Duplicates to it for personal reference.

    Up to now I had a general Search box for any wild-carded entry , covering all columns.
    Today, i have extended the search to create automatic dropdown filters against each column.

    Together with pagination and column ordering and repositioning, I consider this to be a powerful complement to any Xara design.

    The last bit of the puzzle is the table is designed to retain your last Search, across pages, and, hopefully, across Variants.
    This is done through your browser's Local Storage.

    I put all the coding directly into the HTML <table> file so all you might need to do is use an IFRAME to access it.
    This approach means you publish you Xara design and separately update the HTM file directly.
    The column filters can be placed at the bottom o the table or even presented separately in a small cluster of dropdowns.

    My example file is http://acorn.xara.hosting

    Acorn


    The convertcsv.htm file has the following structure:

    Loader section - uploads all datatables.js assets; links to your currently used jQuery library [include Name UsesJQuery in your design]
    Scripting section - the grunt work to add pagination (displays rows as defined in a small dropdown), general search (automatic wildcard), column ordering(asc/desc), column positioning (drag heading horizontally to new location), column filters (in header but could be in the footer or standalone) & session state
    HTML Table: requires class of 'table'; <thead> & <tfoot> with <th> rows, data in <tr><td> arrangement
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Data Table with Filter, General Search & Column Dropdowns

    A small update.

    If you need the HTML file to be fully independent of Xara you need to change the line <script src="../index_htm_files/jquery.js"></script> to
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •