Answers

• gyrocode Posts: 126Questions: 6Answers: 30

  June 2017

  I'm planning to release a new version of the AlphabetSearch plug-in soon to make it appear correctly on smaller screen devices.

  ---

  See more articles about jQuery DataTables on gyrocode.com.
• allan Posts: 64,126Questions: 1Answers: 10,579 Site admin

  June 2017

  Simply including the Responsive JS and CSS and then enabling it with responsive appears to do the job nicely: https://jsfiddle.net/dx5arbnt/51/ .

  If you use the nightly version of the Responsive CSS you shouldn't get the icons on the grouping rows.

  Allan
• gyrocode Posts: 126Questions: 6Answers: 30

  June 2017

  Allan,

  I think Raju refers to bar with A-Z not wrapping up properly on smaller screens. It should be a simple CSS fix. I will be releasing an update shortly.

  With respect,
  Michael Ryvkin

  ---

  See more articles about jQuery DataTables on gyrocode.com.
• allan Posts: 64,126Questions: 1Answers: 10,579 Site admin

  June 2017

  Oh I see. Okay thanks.

  Pull requests to the original repo welcome

  Allan
• gyrocode Posts: 126Questions: 6Answers: 30

  June 2017 edited June 2017

  Raju,

  I already replied to you on this article about alphabetical search.

  I have updated jQuery DataTables AlphabetSearch plugin adding support for small screen devices, please see jQuery DataTables AlphabetSearch page for more details.

  With respect,
  Michael Ryvkin

  ---

  See more articles about jQuery DataTables on gyrocode.com.
• rajushetty Posts: 3Questions: 2Answers: 0

  July 2017 edited July 2017

  Dear Gyrocode and Allan,

  Thanks very much for replaying back and helping me out. i was out of town for few days. I'm back now..

  I was trying to make alphabets in vertical line and sticky/overlap as attached screenshot. i need this on responsive table(no scrolling in the bottom).

  Can you please give me any suggestions on this.

  Thanks again.

  image.png 24.7K
• gyrocode Posts: 126Questions: 6Answers: 30

  July 2017 edited July 2017 Answer ✓

  Just posted an answer to your question on Stack Overflow, cross-posting it here as well.

  SOLUTION

  Use dom option to manipulate markup for A feature and the rest of the table. Use custom CSS to modify appearance of the alphabet control.

  For example.

  JavaScript

  var table = $('#example').DataTable({
     dom: '<"alphabet-container"A><"table-container"lfrtip>',
     alphabetSearch: {
        column: 0
     }      
  });
  

  CSS

  .alphabet-container {
     float: left;
     width: 10%;   
  }
  
  .table-container {
     float: left;
     width: 90%;
  }
  
  .alphabet-container .alphabet-info,
  .alphabet-container .alphabet-info-display { 
     display: none 
  }
  
  .alphabet-container .alphabet ul,
  .alphabet-container .alphabet li,
  .alphabet-container .alphabet a {
     display: block;
  }
  
  .alphabet-container .alphabet {
     margin: 0 15px 0 0;
  }
  

  EXAMPLE

  See this example for code and demonstration.

  LINKS

  jQuery DataTables AlphabetSearch - feature plug-in for the jQuery DataTables library that provides A-Z alphabetical search feature.

  ---

  See more articles about jQuery DataTables on gyrocode.com.