pjaudiomv/bmlt_jsonp_datatable.html

## bmlt_jsonp_datatable.html
<!DOCTYPE html>
<html>
<head>
    <title>BMLT Meetings with JSONP and DataTables in jQuery</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<div id="content"style="width:95%">
    <table id="meetings" class="display">
        <thead>
        <tr>
            <th>DAY</th>
            <th>TIME</th>
            <th>AREA</th>
            <th>NAME</th>
            <th>ADDRESS</th>
            <th>FORMATS</th>
        </tr>
        </thead>
    </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>


    var getServiceBodies = function(callback) {
        getJSON("https://bmlt.sezf.org/main_server/client_interface/jsonp/?switcher=GetServiceBodies&callback=?", callback);
    };

    var getServiceBodyById = function(id) {
        for (item of serviceBodies) {
            if (item.id == id) {
                return item;
            }
        }
    }

    var serviceBodies = [];

    $(function() {
        getServiceBodies(function(data) {
            serviceBodies = data;
        })
    })


    $(document).ready(function() {
        $('#meetings').DataTable( {
            "scrollY": "400px",
            "paging": false,
            "scrollCollapse": true,
            "ajax": {
                url: "https://bmlt.sezf.org/main_server/client_interface/jsonp/",
                data: {
                    "switcher": 'GetSearchResults',
                    "services": '43',
                    "recursive": '1',
                    "sort_keys": 'weekday_tinyint,start_time',
                },
                dataType: "jsonp", // jsonp
                type: "POST",
                jsonpCallback: 'getMeetings', // add this property
                contentType: "application/json; charset=utf-8",
                "dataSrc": function (json) {
                    var meeting_data = new Array();
                    for(var i=0;i< json.length; i++){
                        meeting_data.push({
                            'day' : getDayOfWeek(json[i].weekday_tinyint - 1),
                            'time': militaryToStandard(json[i].start_time),
                            'area' : getServiceBodyById(json[i].service_body_bigint)['name'],
                            'meeting_name': json[i].meeting_name,
                            'address': json[i].location_street + " " + json[i].location_municipality + ", " + json[i].location_province + " " + json[i].location_postal_code_1,
                            'formats': json[i].formats
                        })
                    }
                    return meeting_data;
                }
            },
            "columns": [
                {'data': 'day'},
                {'data': 'time'},
                {'data': 'area'},
                {'data': 'meeting_name'},
                {'data': 'address'},
                {'data': 'formats'}
            ]
        } );
    } );


    var getDayOfWeek = function(dayint) {
        return ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][dayint];
    };
    var militaryToStandard = function(value) {
        if (value !== null && value !== undefined){ //If value is passed in
            if(value.indexOf('AM') > -1 || value.indexOf('PM') > -1){ //If time is already in standard time then don't format.
                return value;
            }
            else {
                if (value.length == 8) { //If value is the expected length for military time then process to standard time.
                    valueconv = value.split(':'); // convert to array
                    // fetch
                    var hours = Number(valueconv[0]);

                    // calculate
                    var timeValue;
                    if (hours > 0 && hours <= 12) { // If hour is less than or equal to 12 then convert to standard 12 hour format
                        timeValue= "" + hours;
                    } else if (hours > 12) { //If hour is greater than 12 then convert to standard 12 hour format
                        timeValue= "" + (hours - 12);
                    } else if (hours == 0) { //If hour is 0 then set to 12 for standard time 12 AM
                        timeValue= "12";
                    }

                    timeValue += ":" + valueconv[1];  // get minutes
                    timeValue += (hours >= 12) ? " PM" : " AM";  // get AM/PM
                    // show
                    return timeValue;
                }
                else { //If value is not the expected length than just return the value as is
                    return valueconv;
                }
            }
        }
    };
    var getJSON = function(url, callback) {
        var random = Math.floor(Math.random() * 999999);
        var callbackFunctionName = "cb_" + random
        url = url.replace("callback=?", "callback=" + callbackFunctionName);

        window[callbackFunctionName] = function(data) {
            callback(data);
        };

        var scriptItem = document.createElement('script');
        scriptItem.setAttribute('src', url);
        document.body.appendChild(scriptItem);
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>BMLT Meetings with JSONP and DataTables in jQuery</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
	</head>
	<body>
	<div id="content"style="width:95%">
	<table id="meetings" class="display">
	<thead>
	<tr>
	<th>DAY</th>
	<th>TIME</th>
	<th>AREA</th>
	<th>NAME</th>
	<th>ADDRESS</th>
	<th>FORMATS</th>
	</tr>
	</thead>
	</table>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
	<script>


	var getServiceBodies = function(callback) {
	getJSON("https://bmlt.sezf.org/main_server/client_interface/jsonp/?switcher=GetServiceBodies&callback=?", callback);
	};

	var getServiceBodyById = function(id) {
	for (item of serviceBodies) {
	if (item.id == id) {
	return item;
	}
	}
	}

	var serviceBodies = [];

	$(function() {
	getServiceBodies(function(data) {
	serviceBodies = data;
	})
	})



	$(document).ready(function() {
	$('#meetings').DataTable( {
	"scrollY": "400px",
	"paging": false,
	"scrollCollapse": true,
	"ajax": {
	url: "https://bmlt.sezf.org/main_server/client_interface/jsonp/",
	data: {
	"switcher": 'GetSearchResults',
	"services": '43',
	"recursive": '1',
	"sort_keys": 'weekday_tinyint,start_time',
	},
	dataType: "jsonp", // jsonp
	type: "POST",
	jsonpCallback: 'getMeetings', // add this property
	contentType: "application/json; charset=utf-8",
	"dataSrc": function (json) {
	var meeting_data = new Array();
	for(var i=0;i< json.length; i++){
	meeting_data.push({
	'day' : getDayOfWeek(json[i].weekday_tinyint - 1),
	'time': militaryToStandard(json[i].start_time),
	'area' : getServiceBodyById(json[i].service_body_bigint)['name'],
	'meeting_name': json[i].meeting_name,
	'address': json[i].location_street + " " + json[i].location_municipality + ", " + json[i].location_province + " " + json[i].location_postal_code_1,
	'formats': json[i].formats
	})
	}
	return meeting_data;
	}
	},
	"columns": [
	{'data': 'day'},
	{'data': 'time'},
	{'data': 'area'},
	{'data': 'meeting_name'},
	{'data': 'address'},
	{'data': 'formats'}
	]
	} );
	} );


	var getDayOfWeek = function(dayint) {
	return ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][dayint];
	};
	var militaryToStandard = function(value) {
	if (value !== null && value !== undefined){ //If value is passed in
	if(value.indexOf('AM') > -1 \|\| value.indexOf('PM') > -1){ //If time is already in standard time then don't format.
	return value;
	}
	else {
	if (value.length == 8) { //If value is the expected length for military time then process to standard time.
	valueconv = value.split(':'); // convert to array
	// fetch
	var hours = Number(valueconv[0]);

	// calculate
	var timeValue;
	if (hours > 0 && hours <= 12) { // If hour is less than or equal to 12 then convert to standard 12 hour format
	timeValue= "" + hours;
	} else if (hours > 12) { //If hour is greater than 12 then convert to standard 12 hour format
	timeValue= "" + (hours - 12);
	} else if (hours == 0) { //If hour is 0 then set to 12 for standard time 12 AM
	timeValue= "12";
	}

	timeValue += ":" + valueconv[1]; // get minutes
	timeValue += (hours >= 12) ? " PM" : " AM"; // get AM/PM
	// show
	return timeValue;
	}
	else { //If value is not the expected length than just return the value as is
	return valueconv;
	}
	}
	}
	};
	var getJSON = function(url, callback) {
	var random = Math.floor(Math.random() * 999999);
	var callbackFunctionName = "cb_" + random
	url = url.replace("callback=?", "callback=" + callbackFunctionName);

	window[callbackFunctionName] = function(data) {
	callback(data);
	};

	var scriptItem = document.createElement('script');
	scriptItem.setAttribute('src', url);
	document.body.appendChild(scriptItem);
	}
	</script>
	</body>
	</html>