Giter Club home page Giter Club logo

Comments (5)

bkd avatar bkd commented on July 28, 2024

My solution so far only works on sortable columns but you get the idea. Please advise!

I'm using notation of "f_" to denote a filter field

When the filter is applied on the scoped model I store the <%=session["last_changed"]%> to the filter applied. I have a list of filters for each model stored and save them as session vars

I iterate through each param filter for the model when the ajax request is exectued

session["last_changed"]=param if params[param] != session[param]

Also needed to remove the following, so that the filtered column headings appear even if no results are present

 - unless smart_listing.empty?

_update_list.js.erb

var smart_listing = $('#<%= name %>').smart_listing();
smart_listing.update_list("<%= escape_javascript(render(:partial => part, :locals => {:smart_listing => smart_listing})) %>", <%= smart_listing_data.to_json.html_safe %>);
var item = $('#<%=session["last_changed"]%>');
var strLength= item.val().length * 2; 
item.focus();
item[0].setSelectionRange(strLength, strLength);

_sortable.html.erb

<input autocomplete="off" class="smart_filters search" id="<%=attribute.gsub('.','_')%>" name="  <%=attribute%>" placeholder="<%=title%>..." value="<%=session['f_'+attribute.gsub(".","_")]%>" type="text">
<%= link_to url, :class => container_classes, :data => {:attr => attribute}, :remote => true do %>`

application.js.cofee

$ ->
  $("body").on "keydown", ".smart_filters", ->
    $('.smart_filters').keyup (e) ->
      txtVal = $(this).val()
      id= "#f_"+$(this).attr("id")
      id = id.replace(".","_")
      $(id).attr 'value', txtVal
      $(id).trigger("keydown")
      $(id).trigger("change")
      return

In the controls for the smart listing filter I hide the input boxes inside the form

<input autocomplete="off" class=" search form-control" id="f_people_headline" name="f_people_headline" placeholder="Headline..." value="" type="hidden">

Some css to clear up the layout

.sortable{
  margin-left:-5px;
  display:inline;
  border: 1px solid #CCC;
  padding: 7px;
  border-radius: 0 4px 4px 0;
  background-color: #EFEFEF;
  height: 30px;
}

.smart_filters{
  width:70%;
  min-width:40px;
  display:inline;
  font-weight: 400;
  height: 30px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  background-color: #FFF;
  padding: 6px 2px 6px 2px;
  border: 1px solid #CCC;
}

See below an example of what it looks like.

I think it would be good to have this in the core feature list ;-)

example

from smart_listing.

ljachymczyk avatar ljachymczyk commented on July 28, 2024

Can you make a pull request with such feature?

from smart_listing.

jumhh avatar jumhh commented on July 28, 2024

Filtering per column is very interesting point. I just tried to integrate filter as a second header line under the sorting header elements. You see an example in the image below. But this only works, if I do not use your in-place editing. So I have to decide either using in-place editing or integrating column filters in the table.
Alternatively I can define the column filters outside but then their layout is different from the columns of the table, if I do not use fixed width.
Filtering itself I implemented on server side via params and scopes.
So I would appreciate a solution for this topic!
filter

from smart_listing.

ljachymczyk avatar ljachymczyk commented on July 28, 2024

@jumhh, why in-place-editing breaks your column filters?

from smart_listing.

ljachymczyk avatar ljachymczyk commented on July 28, 2024

Closing due to lack of feedback.

from smart_listing.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.