Friday 24th January, 2014

JS Bin update

When answering questions regarding DataTables, demonstrating how something works, or creating a test case for something that doesn't work(!), it is very useful to be able to show a small code sample actually running on a live table.

Software such as JS Fiddle provides this ability by creating an environment that allows HTML, CSS and Javascript to be written, run and saved all in the browser - with code sharing made possible by simply sharing a URL. Almost perfect for our needs.

Going a step further, the live code environment should make the ability to provide test cases and code samples as painless as possible. In the case of DataTables, we want a default page which includes a simple table, the DataTables library and Javascript to run the DataTable. The ability to select the extension libraries such as TableTools should also be trivial.

Enter JS Bin.

JS Bin is a web-app that allows input of Javascript, HTML and CSS that is then run in the browser. It is an open source program, developed by Remy Sharp of Left Logic and others, so I've can customised it to meet our requirements!

The DataTables site has actually used JS Bin since its v1 release, but times have moved on and Remy and his team have done an amazing job adding new features to JS Bin, and DataTables.net now has JS Bin v3 available for use.

Using JS Bin

Actually using JS Bin is very simple; simply load http://live.datatables.net in your browser and start customising the HTML / Javascript / CSS as required. The buttons at the top of the browser window allow you to select what code is shown, and an option to see the final output.

To share a created bin click the Share menu at the top of the browser window and copy the URL shown. Add that URL to your forum post, e-mail or otherwise share it and other developers will be able to review your example.

For further information about how to use the DataTables live site, including pre-made templates for loading Ajax and server-side processing data, please refer to technical note 9.

Thank you

Thank you to Remy Sharp and all the others how have contributed to JS Bin and made it possible to create the DataTables live test environment!