Materialize CSS Remove table head spacing - materialize

I making a simple demo where i have few employees information. I am using materialize css table. But i am getting extra space between sr.no and other column names.
here is my code :
<br/>
<div class="row">
<div class="col l8">
<div class="card darken-2">
<div class="card-content">
<span class="card-title">{{tableTitle}}</span>
<br/>
<div class="row">
<div class="input-field col s4">
<input id="empSearch" type="text" placeholder="Search">
</div>
</div>
<br/>
<div class="row">
<div class="col lg7">
<table class="bordered highlight responsive-table">
<thead>
<tr>
<th>Sr.no</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of EmployeeData;let i= index">
<td>{{i+1}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
<td>{{item.Address}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Department}}</td>
<td>{{item.Salary}}</td>
<td>
<i class="material-icons">delete</i>
</td>
<td>
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

in the <th> you could set width="30px" or whatever your're comfortable with.
The icons, I'd put in one cell, and use text-align: right
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
<thead>
<tr>
<th width="30px">Sr.no</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
<th>Designation</th>
<th>Department</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>{{i+1}}</td>
<td>{{item.Name}}</td>
<td>{{item.Age}}</td>
<td>{{item.Gender}}</td>
<td>{{item.Address}}</td>
<td>{{item.Designation}}</td>
<td>{{item.Department}}</td>
<td>{{item.Salary}}</td>
<td style="text-align: right">
<i class="material-icons">delete</i>
<i class="material-icons">mode_edit</i>
</td>
</tr>
</tbody>
</table>

Related

Bootstrap table column not same width when using a form input

I am trying to create a bootstrap table with one of the cell having a form input. However, I realised that this input prevents bootstrap from setting the table width to be the same for each column, even when I reduce the length of the input.
Can anyone help with this to adjust the width to be consistent for all columns? Thanks.
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Added a class to the <table> and the <input> tag. By making the text-align center will make your table more subtle and consistent. You should also try using classes for other screen sizes like col-md-6 or col-lg-4 whatever suits you best. But this practice will help you control your UI across different screen sizes. Hope that helps. Let me know if this doesn't work out for you.
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
.txt_cent{
text-align:center;
}
.inp_width{
width:70px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped txt_cent" >
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty inp_width" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>

Vuejs - reading data from table

I'm trying to pull an updated value out of the table below to send it to database, but it appears that Vue does not support two-way data binding. Could anyone give me a hint on how I extract the current cell value and pass it to a function saving new data to a database?
<table v-if="tableData.length > 0" class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Date From</th>
<th scope="col">Date To</th>
<th scope="col">Days</th>
<th scope="col">Type</th>
<th scope="col">Request Date</th>
</tr>
</thead>
<tbody>
<tr v-for="(object, index) in tableData" :key="index">
<th scope="=row"><label class="tableNumberColumn">{{index + 1}}</label></th>
<td #change="readData" v-for="(value, key) in object" :key="key" v-if="key != 'formId'">
<div #change="readData" class="container tableColumnDiv" v-if="key === 'numberOfDays'" contenteditable="true">{{value}}</div>
<div class="container tableColumnDiv" v-else-if="key === 'timeOffType'" contenteditable="true">{{value}}</div>
<div v-else>
<datepicker :value="value" :bootstrap-styling="true"></datepicker>
</div>
</td>
<td>
<b-button #click="deleteRow(index)" class="btn btn-sm buttonDelete">Delete</b-button>
</td>
<td>
<b-button #click="update(index)" class="btn btn-sm buttonUpdate">Update</b-button>
</td>
<td>
<b-button class="btn btn-sm buttonPrint">Print</b-button>
</td>
</tr>
</tbody>
I am pasting the code one more time as I've removed some unnecessary stuff:
<table v-if="tableData.length > 0" class="table table-bordered table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Date From</th>
<th scope="col">Date To</th>
<th scope="col">Days</th>
<th scope="col">Type</th>
<th scope="col">Request Date</th>
</tr>
</thead>
<tbody>
<tr v-for="(object, index) in tableData" :key="index">
<th scope="=row"><label class="tableNumberColumn">{{index + 1}}</label></th>
<td v-for="(value, key) in object" :key="key" v-if="key != 'formId'">
<div class="container tableColumnDiv" v-if="key === 'numberOfDays'" contenteditable="true">{{value}}</div>
<div class="container tableColumnDiv" v-else-if="key === 'timeOffType'" contenteditable="true">{{value}}</div>
<div v-else>
<datepicker :value="value" :bootstrap-styling="true"></datepicker>
</div>
</td>
<td>
<b-button #click="deleteRow(index)" class="btn btn-sm buttonDelete">Delete</b-button>
</td>
<td>
<b-button #click="update(index)" class="btn btn-sm buttonUpdate">Update</b-button>
</td>
<td>
<b-button class="btn btn-sm buttonPrint">Print</b-button>
</td>
</tr>
</tbody>

Style slot in vue

Have a Table call in Index.vue:
<utilization-table :title="table.title" :columns="table.columns" :rows="table.rows">
<template scope="data>
<td class="th_normal">{{data.row.name}}</td>
</template>
</utilization-table>
The Table Template is UtilizationTable.vue:
<template>
<div>
<h3 v-html="title"></h3>
<table class="table table-striped table-hover">
<thead>
<tr>
<th v-if="selectable" class="table-view-pf-select" aria-label="Select all rows">
<label>
<span class="sr-only">Select all rows</span>
<input type="checkbox" #change="changeSelectAll">
</label>
</th>
<th v-for="column in columns">{{column}}</th>
</tr>
</thead>
<tbody>
<utilization-table-row ref="row" v-for="(row, i) in rows" :key="i">
<slot :row="row"></slot>
</utilization-table-row>
</tbody>
</table>
</div>
</template>
With a Row as UtilizationTableRow.vue:
<template>
<tr role="row">
<slot></slot>
</tr>
</template>
It'd like to style the first "td" in the table to 130px. Since it is a slot, I'm not sure how to do this.
Normally, if my table is
<table>
<tr>
<td>
</td>
</tr>
</table>
I could just do:
<style> table tr td:first-child, table tr td:first-child {
width: 130px !important;
}
</style>
However, that isn't taking hold.

How to show each cell table data in popup window using datatables?

How to show the popup for each cell with its table data using Datatables?
In the below script script i had used datatables plugin along with alert to show popup each cell but am not getting the proper output?How can i modify the script to show each cell data in popup widow when mouse click is done inside the each cell?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
</head>
<table border="1" align="center" id="example" class="display" width="100%">
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>7</td>
<td>12</td>
</tr>
</tbody>
<script>
$(document).ready(function()
{
$('#example tbody').click( function () {
alert("test") ;
});
});
</script>
</table>
</html>
Important Note: Before adding code please include js && css to your page refer js which are use fiddle External Resources section.
Revamp your click function to on click function.
Javascript :
$(document).ready(function () {
var companyTable= $('#jobs').DataTable();
$('#jobs').on('click', 'tr', function () {
$("#company-full-name").val(companyTable.row(this).data()[1]);
$("#company-short-name").val(companyTable.row(this).data()[2]);
$('#DescModal').modal("show");
});
});
HTML:
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">On click row popup will get open </h3>
</div>
<table id="jobs" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Job Title</th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thead>
<tbody>
<!--Made it easier, so no more redundant copypasta in other pages-->
<tr>
<td>1</td>
<td>VP Marketing</td>
<td>Devify</td>
<td>22.38</td>
<td>222 Lillian Hill</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>2</td>
<td>Administrative</td>
<td>Skiba</td>
<td>10.92</td>
<td>3 Corscot Terrace</td>
<td>2015-02-03</td>
</tr>
<tr>
<td>3</td>
<td>Database Admini</td>
<td>Dynazzy</td>
<td>36.72</td>
<td>5082 Butterfield Ter</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>4</td>
<td>Quality Control</td>
<td>Realmix</td>
<td>23.48</td>
<td>598 Independence Cir</td>
<td>2015-02-19</td>
</tr>
<tr>
<td>5</td>
<td>Health Coach II</td>
<td>Linkbuzz</td>
<td>17.11</td>
<td>18 Donald Plaza</td>
<td>2015-02-17</td>
</tr>
<tr>
<td>6</td>
<td>Biostatistician</td>
<td>Roomm</td>
<td>36.37</td>
<td>3 Almo Terrace</td>
<td>2015-02-16</td>
</tr>
<tr>
<td>7</td>
<td>Assistant Profe</td>
<td>Shufflester</td>
<td>29.43</td>
<td>640 Towne Terrace</td>
<td>2015-02-13</td>
</tr>
<tr>
<td>8</td>
<td>Analog Circuit</td>
<td>Tagcat</td>
<td>25.66</td>
<td>316 Claremont Road</td>
<td>2015-02-21</td>
</tr>
<tr>
<td>9</td>
<td>Structural Engi</td>
<td>Tagchat</td>
<td>35.55</td>
<td>809 Butterfield Park</td>
<td>2015-02-10</td>
</tr>
<tr>
<td>10</td>
<td>Senior Develope</td>
<td>Browsecat</td>
<td>21.62</td>
<td>5 Sachs Court</td>
<td>2015-01-30</td>
</tr>
<tr>
<td>11</td>
<td>Human Resources</td>
<td>Jaxbean</td>
<td>32.00</td>
<td>6 Corscot Street</td>
<td>2015-02-10</td>
</tr>
<tr>
<td>12</td>
<td>Analyst Program</td>
<td>Jetpulse</td>
<td>28.13</td>
<td>30 Eggendart Place</td>
<td>2015-02-20</td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="DescModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">�</button>
<h3 class="modal-title">Job Requirements & Description</h3>
</div>
<div class="modal-body">
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">job title</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" maxlength="50" id="company-full-name" name="companyFullName">
</div>
</div>
<br>
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Company</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" maxlength="30" id="company-short-name" name="companyShortName">
</div>
</div>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Apply!</button>
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
CSS:
<style type="text/css" class="init"> body {
font-size: 140%;
}
</style>
For DEMO : https://jsfiddle.net/dipakthoke07/t53cyutt/42/
Thanks.

datatables does not becomes responsive on bootstrap3 modal dialog

I am using datatables plugin for my table, please note that I am using responsive datatables.
Also I am using bootstrap v3.2.0. I have put-up my responsive datatables on bootstrap modals dialog. But problem, I am facing is that my table is not becoming responsive on modal dialog, it becomes responsive on normal page though.
I have found if i remove the class name "modal" from modal code then it becomes responsive so it is clear that class modal is creating problem but i can not remove modal class as well otherwise modal won't work.
Here is css of modal class:
.modal {
bottom: 0;
display: none;
left: 0;
outline: 0 none;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0;
top: 0;
z-index: 1050;
}
My Modal code:
<div class=" fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Send File Popup</h4>
</div>
<div class="modal-body">
<table id="filepopupTable" class="display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th class="padding10"> <div class="ckbox ckbox-default">
<input type="checkbox" id="selectall" value="1" class="mt0 mr10" />
<label for="selectall" class="mr5">Select All</label>
</div></th>
<th>File Name</th>
<th>Size</th>
<th>Uploaded On</th>
<th data-sort-ignore="true">Quick Action</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check1" value="1" />
<label for="check1"></label>
</div>
</td>
<td>Life brochure.doc</td>
<td>3 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<i class="glyphicon glyphicon-send"></i>
</td>
</tr>
<tr class="even gradeC">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check2" value="1" />
<label for="check2"></label>
</div>
</td>
<td>Provider_list.xlxs</td>
<td>34 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<i class="glyphicon glyphicon-send"></i>
</td>
</tr>
<tr class="odd gradeA">
<td class="thmb">
<div class="ckbox ckbox-default">
<input type="checkbox" id="check3" value="1" />
<label for="check3"></label>
</div>
</td>
<td>My_logo.png</td>
<td>443 kb</td>
<td> Jan 03, 2014</td>
<td class="table-action">
<i class="glyphicon glyphicon-send"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
Please everyone, check this issue and try to fix it.
Help is much appreciated!!
Its not so much that the modal class is causing the issue as it is the fact that the modal class hides its contents by default.
The Responsive DataTables extension will not run on a table that is hidden during initialization.
To work around this issue after you show the modal recalculate the column widths. First the table:
var myTable = $("#myTable").DataTable({});
Then later showing when you show the modal
$("#myModal").modal('show');
myTable.responsive.recalc();
More information can be found here: http://datatables.net/extensions/responsive/reference/api/responsive.recalc%28%29
To add to what KyleT said, make sure you wait until the modal has been shown before calculating the dimensions, this can done like so...
//once the modal has been shown
$('#yourModal').on('shown.bs.modal', function() {
//Get the datatable which has previously been initialized
var dataTable= $('#yourResponsiveDataTableInModal').DataTable();
//recalculate the dimensions
dataTable.columns.adjust().responsive.recalc();
});
Is this any help to you: http://codepen.io/panchroma/pen/nBmbL ?
HTML is unchanged. CSS is as above with the addition of
.modal-content{
min-width: 300px; /* adjust as necessary */
}
As you can see, I'm stopping the modal window from collapsing too small.
Good luck!
Try adding <div class="table-responsive"></div> wrapper around your table. It worked for me (sort of). I couldn't get it to work inside a panel, but it did work a lot better with the wrapper.
<html>
<head>
<!--Modal Goes First -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<!--Modal End -->
<!-- DataTable -->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Bootstrap 3</title>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<!-- DataTable End -->
<script type="text/javascript" class="init">
var $j = jQuery.noConflict();
$j(document).ready(function (){
$j('#example').DataTable();
});
$(document).ready(function(){
});
</script>
</head>
<body>
<a data-toggle="modal" href="#myModal" class="btn btn-success btn-lg" data-target="#myModal">My Modal</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<table id="example" class="table table-striped table-bordered" style="width:100%"></body>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<div class="modal-footer">
Close
<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
</body>
</html>
/* I had similar issue , I needed datatable (search/sort/pagination) inside modal, fully functioning code here: */