How to develop a responsive datatable with alphabetical order (vertically.)

rajushetty

Hi,

I’m new to data tables, I saw you did wonderful job on creating responsive design. other side someone created a alphabetic search. https://www.gyrocode.com/articles/jquery-datatables-alphabetical-search/

Can you please tell me how to combine both alphabetical search and responsive table to into one?

Here is Jsfiddle file link: https://jsfiddle.net/dx5arbnt/47/
I tried doing that but could not, Can you please tell me how to do that or sample on js fiddle will be highly appreciated.

I wanted to use it on a mobile app, so responsiveness is a must and i also trying to keep alphabets vertically and sticky. any suggestions how to do it?
This is my reference app https://play.google.com/store/apps/details?id=com.yfjc.christsongs&hl=en

Many thanks
Raju

gyrocode

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

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

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

Oh I see. Okay thanks.

Pull requests to the original repo welcome

Allan

gyrocode

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

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.

gyrocode

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.