https://cliente.tpack.com.do/assets/js/pages/datatables_data_sources.js

1/* ------------------------------------------------------------------------------
2*
3*  # Datatables data sources
4*
5*  Specific JS code additions for datatable_data_sources.html page
6*
7*  Version: 1.0
8*  Latest update: Aug 1, 2015
9*
10* ---------------------------------------------------------------------------- */
11
12$(function() {
13
14
15    // Table setup
16    // ------------------------------
17
18    // Setting datatable defaults
19    $.extend( $.fn.dataTable.defaults, {
20        autoWidth: false,
21        columnDefs: [{ 
22            orderable: false,
23            width: '100px',
24            targets: [ 5 ]
25        }],
26        dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
27        language: {
28            search: '<span>Filter:</span> _INPUT_',
29            lengthMenu: '<span>Show:</span> _MENU_',
30            paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
31        },
32        drawCallback: function () {
33            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
34        },
35        preDrawCallback: function() {
36            $(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
37        }
38    });
39
40
41    // HTML sourced data
42    $('.datatable-html').dataTable();
43
44
45    // AJAX sourced data
46    $('.datatable-ajax').dataTable({
47        ajax: 'assets/demo_data/tables/datatable_ajax.json'
48    });
49
50
51    // Javascript sourced data
52    var dataSet = [
53        ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
54        ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
55        ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
56        ['Trident','Internet Explorer 6','Win 98+','6','A'],
57        ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
58        ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
59        ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
60        ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
61        ['Gecko','Camino 1.0','OSX.2+','1.8','A'],
62        ['Gecko','Camino 1.5','OSX.3+','1.8','A'],
63        ['Webkit','Safari 1.2','OSX.3','125.5','A'],
64        ['Webkit','Safari 1.3','OSX.3','312.8','A'],
65        ['Webkit','Safari 2.0','OSX.4+','419.3','A'],
66        ['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
67        ['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
68        ['Misc','NetFront 3.1','Embedded devices','-','C'],
69        ['Misc','NetFront 3.4','Embedded devices','-','A'],
70        ['Misc','Dillo 0.8','Embedded devices','-','X'],
71        ['Misc','Links','Text only','-','X']
72    ];
73
74    $('.datatable-js').dataTable({
75        data: dataSet,
76        columnDefs: []
77    });
78
79
80    // Nested object data
81    $('.datatable-nested').dataTable({
82        ajax: 'assets/demo_data/tables/datatable_nested.json',
83        columns: [
84            {data: "name[, ]"},
85            {data: "hr.0" },
86            {data: "office"},
87            {data: "extn"},
88            {data: "hr.2"},
89            {data: "hr.1"}
90        ]
91    });
92
93
94    // Generate content for a column
95    var table = $('.datatable-generated').DataTable({
96        ajax: 'assets/demo_data/tables/datatable_ajax.json',
97        columnDefs: [{
98            targets: 2,
99            data: null,
100            defaultContent: "<button class='label label-default'>Show</button>"
101        },
102        { 
103            orderable: false,
104            targets: [0, 2]
105        }]
106    });
107    
108    $('.datatable-generated tbody').on('click', 'button', function () {
109        var data = table.row($(this).parents('tr')).data();
110        alert(data[0] +"'s location is: "+ data[ 2 ]);
111    });
112
113
114
115    // External table additions
116    // ------------------------------
117
118    // Add placeholder to the datatable filter option
119    $('.dataTables_filter input[type=search]').attr('placeholder','Type to filter...');
120
121
122    // Enable Select2 select for the length option
123    $('.dataTables_length select').select2({
124        minimumResultsForSearch: Infinity,
125        width: 'auto'
126    });
127    
128});