Differences from Original

• Commented source code
• Updated libraries
• Nicer popup
• Different styling (white base, centered)
• Disable search bar by default
• Cleaned source code
• Added future option (reading groups)
• Closer to IEEE format
• Better handling of missing entries

Getting Started

First, load the required JS and CSS files:

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bib-list.min.js"></script>
<link href="assets/css/bib-list.min.css" rel="stylesheet" type="text/css" />

All you need to do is to include the BibTeX into an HTML page and tell the script to turn it into a sortable and searchable table. For example:

<table id="pubTable" class="display"></table>
<pre id="bibtex">
@article{Karavirta:JVLCTaxonomy,
   title = {A comprehensive taxonomy of algorithm animation languages},
   journal = {Journal of Visual Languages \& Computing},
   volume = {20},
   number = {1},
   pages = {1--22},
   year = {2010},
   issn = {1045-926X},
   doi = {DOI: 10.1016/j.jvlc.2009.09.001},
   read_date = {2015-11-13}, // This is optional
   author = {Ville Karavirta and Ari Korhonen and Lauri Malmi and Thomas Naps}
}
</pre>

Finally, the bib-publication-list needs to know the input data element and the output table. So, one line of JavaScript. Alternatively, the bibtex can be loaded from a file. Personally I prefer including it in the HTML, though. This way, browsers without JavaScript enabled get at least to see the bibtex instead of a blank page. This causes an ugly-looking flash of unstyled content, though.

bibtexify("#bibtex", "pubTable");
// Or
bibtexify("example-biblist.bib", "pubTable");

If you want to fix the flash of unstyled content, you can hide the #bibtex element and make it visible when JavaScript is disabled. To do that, add:

#bibtex { display: none; } // to css
<noscript><style>#bibtex { display: block; }</style></noscript> // to html

Configuration Options

The bibtexify function accepts an optional third parameter for configuration options. The full list can be seen here with their defaults. These options include:

visualization	A boolean to control addition of the visualization. Defaults to true.
future	If set to true it will read the `read_date` from the bibtex entry in the format `{YYYY-MM-DD}`. This will be entered in the first column and is great for reading group due dates etc. It is recommended that the visualization is turned off. `{TBD}` can be used to show that the date has yet to be determined. Defaults to false.
tweet	Twitter username to add Tweet links to bib items with a url field.
sorting	Control the default sorting of the list. Defaults to `[[0, "desc"], [1, "desc"]]`. See (http://datatables.net/api#fnSort) for details on formatting.
searching	If true this will display a search bar for users to search for publications. By default this is disabled
max_year	How many years should be displayed in the bar graph visualization. This helps the page not look cluttered. By default this is 10 years
max_pagination	How elements should be listed on pagination page. By default this is 20 entries.
defaultYear	Entries without a year will use this as year. Defaults to "To Appear".

Building from Source

There is a Jakefile for building the combined and minified versions with Jake and a Makefile for building with make. Currently uses the yuicompressor tool to minify both the css and js and output that into the build folder. (note: the jake file has not been updated to new system)

Credits

This code uses some great libraries: jQuery, DataTables, Popup.js, and JavaScript BibTeX Parser.