Data Tables

by Roshan Karunarathna

HTML

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables_themeroller.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="mytable" class="table" cellspacing="0" width="100%"></table>
<!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Member List</h4>
                </div>
                <div class="modal-body">
                    <table id="sub_table"></table>
                </div>
                <div class="modal-footer">
                    
                </div>
            </div>

        </div>
    </div>

JavaScript

$(document).ready(function() {
			$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
				$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
			} );
			 
			 var example = $('table.table').DataTable( {
				ajax:'https://api.myjson.com/bins/2xiuk',
				"columns": [
					{ 
						"data": "hr.0",
						"title": "Name"
					},
					{ 
						"data": "name[, ]",
						"title":"Club Leader"
					},
					{ 
						"data": "office",
						"title": "District"
					},
					{ 
						"data": "hr.2",
						"title": "Established" 
					},
					{ 
						"data": "extn",
						"title":"No of Members"
					},
					{ 
						"title":"Show Members",
						"render": function(){
							return "<button data-toggle='modal' data-target='#myModal' class='mybutton'>Show</button>";
						}
					},
					{ 
						"data": "office",
						"title":"Address"
					},
					
				]
			} );
			$('table.table').on( 'click', '.mybutton', function () {
				//alert(example.row($(this).parents('tr')).data().members);
				//console.log(example.row($(this).parents('tr')).data().members);
				$.each(example.row($(this).parents('tr')).data().members, function() {
					/*$.each(this,function(k,v){
							console.log(k+" : "+ v);
							$('.modal-body').append('<span>'+k+'</span><span>'+v+'<span><hr>');						
					});*/
					var example = $('#sub_table').DataTable( {
						data:this,
						"columns": [
							{ 
								"data": this.fname,
								"title": "First Name"
							},
							{ 
								"data": this.lname,
								"title":"Last Name"
							},							
						]
					} );
					 
				});				
			});
		});