jQuery Archives » The Code

jQuery Datatables sDom – Custom Elements

February 14, 2019 by Reedyseth

This post is the next part of Working with the jQuery Datatables plugin. Since this tutorial is written for those familiar with the plugin You might need to learn the basics of the plugin on the following link http://behstant.com/blog/jquery/datatables-jquery-implementation/. On this tutorial I am going to focus on how to manipulate the elements of the Datatables by using the sDom property. In the first place you need to know that the plugin jQuery Datatables have 4 visual core elements:

Number of items to Display.
The main table.
Number of records retrieved.
Paginator.

Since these elements are visual you can put them in different positions or perhaps you can decide to set them visible or not, however, remember that not adding information into this property will result in a working DataTable using the default settings.

jQuery Datatables Implementation

May 2, 2016November 11, 2015 by Reedyseth

The jQuery Plugin Datatable will help you to keep those huge database results into a better and organize table. I have spoke of the jQuery Datatables plugin into this entry, so I will no use much time in the introduction of the plugin. I will focus and how you can get you database results into that Datatable.

For this Example I will be using a database, the employee table that I have been using in previous tutorials, so if you don’t remember the file structure of the table I present it again.

Datepicker jQuery UI Implementation

May 22, 2017September 18, 2015 by Reedyseth

On this days it is so easy to find a Javascript Datepicker on the field but if you really want a Datepicker with lots of feature you should definitely check out the jQuery UI Datepicker. This jQuery plugin is very configurable to fit your needs. In the following list you can find some of its features.

In order to use this jQuery Datepicker you only have to point to the correct elements with a CSS3 selector, for example if I have a input with id = datepicker then to attached the jQuery Datepicker to that element I would use the following code.

[Plugin Dairy] – jQuery Datatable

November 20, 2015December 8, 2014 by Reedyseth

The jQuery plugin Datatable is a plugin that will allow you to have many features on a HTML table. This plugin is so simple to use, but if you need more complex thing you can also achieve them since the plugin is full of features that can be customize, it also includes an event listener for the action on the table.

Among the features of the Datatable plugin you can have:

Pagination, instant search and multi-column ordering
Supports almost any data source:
DOM, Javascript, Ajax and server-side processing
Easily theme-able: DataTables, jQuery UI, Bootstrap, Foundation
Wide variety of extensions inc. Editor, TableTools, FixedColumns and more
Extensive options and a beautiful, expressive API
Fully internationalisable
Professional quality: backed by a suite of 2900+ unit tests
Free open source software (MIT license)! Commercial support available.
Scrolling options for table viewport
Smart handling of column widths
State saving
Hidden columns

Search with Ajax and jQuery UI Autocomplete, PHP, MySQL and JSON

April 26, 2016September 10, 2014 by Reedyseth

I have been creating posts with scripts to do small stuff, but on this post I would like to show/teach you how to implement the jQuery UI Autocomplete Widget. I have to remark that for the style of the application I am using Bootstrap, so the most important thing is the html code of the form and the Javascript code. This is the Part 1 of the tutorial.

I would like to show you a diagram of the application flow so click it to enlarge.

As you can see the application will load the information when the page loads, this is why the tutorial is Part 1, on further tutorial the information will not be loaded until the user type the information to search. Now, the code.