Answers

• kthorngren Posts: 21,328Questions: 26Answers: 4,949

  June 20

  The Alphabet Search uses this search plugin:

  var _alphabetSearch;
   
  $.fn.dataTable.ext.search.push( function ( settings, searchData ) {
      if ( ! _alphabetSearch ) { // No search term - all results shown
          return true;
      }
   
      if ( searchData[0].charAt(0) === _alphabetSearch ) {
          return true;
      }
   
      return false;
  } );
  

  The searchData parameter contains the data from one row in an array that represents each column. You can use the browser's debugger or console.log statements in side the function if you want to see this.

  searchData[0] in line 8 is accessing the first column of data. The indexes start counting at 0. Change the index to the column index you are interested in. For example searchData[5]will use the 6th column for searching.

  Kevin
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  June 21 edited June 21

  With the current plugin you can use:

  alphabet: {
    column: 5
  }
  

  To tell it what column to use. This is the full TS interface for the alphabet object that you can apply to the DataTables configuration object:

  interface AlphabetSearchOptions {
      column?: number;
      caseSensitive?: boolean;
      numbers?: boolean;
  };
  

  Allan
• kprohaszka Posts: 15Questions: 3Answers: 0

  June 21

  Thanks @allan and @kthorngren for replying! I have a follow-up question: how do I actually implement the plugin? I have the datatables.js file, and datatables.min.js. And for the CMS I'm using, I have a format coded in Velocity that generates my table/HTML code. My confusion is on where I actually add in or call the plugin code. TYIA!
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  June 21

  Here is a working example.

  You need to be able to add the JS and CSS files for the Alphabet Search plugin. I don't know how you would do that in Velocity. If you aren't sure, you'll need to ask the developers of that CMS.

  Allan
• kprohaszka Posts: 15Questions: 3Answers: 0

  June 24

  @allan thanks for the working code, that is helpful. I am the developer for our CMS, but I am a new one and unfortunately do not have anyone to assist. My only question is whether I add the js code to the datatables.js file I have, or if I should create a secondary one and link the table html page to that in order to get the datatables to display.
  Alternatively, would it be better to link to the datatables CDN instead of having an offline file?
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  June 24

  Alternatively, would it be better to link to the datatables CDN instead of having an offline file?

  That's your call. CDNs have some benefits such has you not needing to pay for the hosting and the file is simply there, but you may want to rely on your own hosting rather than mine.

  My only question is whether I add the js code to the datatables.js file I have, or if I should create a secondary one and link the table html page to that in order to get the datatables to display.

  I don't really understand the question. You need:

  1. DataTables core
  2. The alphabetSearch plugin
  3. Initialisation code

  It is up to you how you organise that. You could bundle them all into one file, but if it were me, I'd probably have the vendor supplied files as is (i.e. DataTables and AlphabetSearch - just leave them as is), and then create your own JS file that does the initialisation. That makes upgrading easier, since you just change the vendor files.

  Allan
• kprohaszka Posts: 15Questions: 3Answers: 0

  June 24

  @allan I think I'm almost there. I have a js file for datatables.js, which I believe is the core, I added the js file for the alphabet search plugin, and I have a datatable call js file.

  The code to modify the plugin so it works that you shared above*, this gets added to the core datatables js file? Or is it added to the alphabet search js file?

  *this code here
  alphabet: { column: 5 }
• tangerine Posts: 3,365Questions: 39Answers: 395

  June 24

  That code goes into your DT initialisation. (table = new DataTable.... etc.)
  See Allan's working example.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  June 24

  The code to modify the plugin so it works that you shared above*, this gets added to the core datatables js file?

  No - that is the initialisation of the DataTable.

  If you aren't sure, then I would suggest not modifying the library files.

  Have the initialisation in a separate file:

  var table = new DataTable('#example', {
    layout: {
      top: 'alphabetSearch'
    },
    alphabet: {
      column: 1
    }
  });
  

  Allan
• kprohaszka Posts: 15Questions: 3Answers: 0

  June 25

  @allan Interesting, thanks! I don't think I have a proper initialization file, I have this code in a separate file and it seems to work okay. Would I just add what you have above to it?
  $(document).ready(function () { $("#directory-table").DataTable(); });
• kthorngren Posts: 21,328Questions: 26Answers: 4,949

  June 25 edited June 25

  Replace the $(document).ready(function () { $("#directory-table").DataTable(); }); in your last code snippet with what Allan provided to look like this:

  $(document).ready(function () { 
    var table = new DataTable('#directory-table', {
      layout: {
        top: 'alphabetSearch'
      },
      alphabet: {
        column: 1
      }
    });
  });
  

  KEvin
• kprohaszka Posts: 15Questions: 3Answers: 0

  June 25

  @kthorngren I tried that, but am getting an error "DataTables warning: table id=directory-table - Unknown feature: alphabetSearch"
• kprohaszka Posts: 15Questions: 3Answers: 0

  June 25

  It's giving an additional error "DataTables warning: table id=directory-table - Cannot reinitialise DataTable. For more information about this error, please see https://datatables.net/tn/3".

  I have the js files linked for the alphabet search plugin, dataTables, and datatables.min files, as well as the revised datatable call file. I'll try to do some digging though to see if I missed something in another area.
• kthorngren Posts: 21,328Questions: 26Answers: 4,949

  June 25

  That suggests you aren't loading the alphabet search plugin correctly. It needs to follow after loading datatables.js. See the HTML tab of Allan's example:
  https://live.datatables.net/papusifo/2/edit

  Are you loading these two files?

      <link href="//cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.css" rel="stylesheet" type="text/css" />
      <script src="//cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.js"></script>
  

  Kevin
• kprohaszka Posts: 15Questions: 3Answers: 0

  June 25

  These are the files in the order being loaded for js:
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="/_files/js/datatables.js"></script> <script src="/_files/js/datatables.min.js"></script> <script src="/_files/js/datatable-call.js"></script> <script src="//cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.js"></script>

  And I have the css script linked as well. The datatable-call file is identical to what was shared above. The other two datatables files are downloaded directly from the site. I have also checked that the table being generated is properly formatted with thead/tbody tags where appropriate.

  The datatable code works with what I originally had, but it does not like the additional code that's been added.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  June 25 Answer ✓

  Put the alphabetSearch file before your datatable-call.js one. The load order has to be:

  1. DataTables core
  2. Alphabet search plugin
  3. Initialisation code.

  Allan
• kthorngren Posts: 21,328Questions: 26Answers: 4,949

  June 25 Answer ✓

  Another problem is you are loading datatables.js twice:

  <script src="/_files/js/datatables.js"></script>
  <script src="/_files/js/datatables.min.js"></script>
  

  Only load it once. Loading datatables.js multiple times can cause issue. Remove one of them.

  Kevin
• kprohaszka Posts: 15Questions: 3Answers: 0

  June 26

  Thanks both, I have made those changes but am still getting the same errors. I will look into it more today and follow-up if I have any more questions. Thanks again for all your help.
• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  June 26

  If you link to the page you are working on we can take a look. Unfortunately, having shown a working example, we'd need a test case to debug to be able to say what is wrong with it.

  Allan