Demo Patternfly Issue: Dynamic DT + Pagination

If the html for table and pagination form is inserted dynamically before initializing DT, the page length selector is not visible. Should include resources from CDN

by Sree K

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.27.6/css/patternfly.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/select/1.2.3/css/select.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.27.6/js/patternfly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<script src="//cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.27.6/js/patternfly.dataTables.pfSelect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.27.6/js/patternfly.dataTables.pfPagination.min.js"></script>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title"><?php echo __('Tasks'); ?></h3>
				</div>
				<div class="panel-body panel-tabs">
					<ul class="nav nav-tabs" role="tablist">
						<li><a href="javascript:;" class="tasks-base-tab" data-target="#widget-tasks-due" data-toggle="tab">Due in 7 days</a></li>
						<li><a href="javascript:;" class="tasks-base-tab" data-target="#widget-tasks-overdue" data-toggle="tab">Over Due</a></li>
					</ul>
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane" id="widget-tasks-due">
							<ul class="nav nav-tabs nav-tabs-pf">
								<li><a href="javascript:;" class="tasks-data-tab" data-href="/<?php echo basename(dirname(APP)); ?>/Tasks/get_week_due_tasks_ajax" data-target="#widget-tasks-due-other" data-toggle="tab" data-message-head="noOtherDue">Assigned To You</a></li>
								<li><a...

JavaScript

var tasksTable = '<table cellpadding="0" cellspacing="0" class="table table-striped table-bordered table-hover panel-body" id="widget-tasks-table"></table>' +
'<form class="content-view-pf-pagination clearfix" content-view-pf-pagination clearfix" id="widget-tasks-table-pagination">' +
'	<div class="form-group">' +
'		<select class="selectpicker pagination-pf-pagesize">' +
'			<option value="10">10</option>' +
'			<option value="15" selected="selected">15</option>' +
'			<option value="25">25</option>' +
'			<option value="50">50</option>' +
'			<option value="100">100</option>' +
'		</select>' +
'		<span>per page</span>' +
'    </div>' +
'	<div class="form-group">' +
'	<span> Showing<span class="pagination-pf-items-current">1-15</span> of <span class="pagination-pf-items-total">75</span>Items</span>' +
'	<ul class="pagination pagination-pf-back">' +
'		<li class="disabled"><a href="javascript:;" title="First Page"><span class="i fa fa-angle-double-left"></span></a></li>' +
'		<li class="disabled"><a href="javascript:;" title="Previous Page"><span class="i fa fa-angle-left"></span></a></li>' +
'	</ul>' +
'	<label for="widget-tasks-table-pagination-page" class="sr-only">Current Page</label>' +
'	<input class="pagination-pf-page" type="text" value="1" id="widget-tasks-table-pagination-page"/>' +
'	<span>of <span class="pagination-pf-pages">5</span></span>' +
'	<ul class="pagination pagination-pf-forward">' +
'	   <li><a href="javascript:;" title="Next Page"><span class="i fa fa-angle-right"></span></a></li>' +
'	   <li><a href="javascript:;" title="Last Page"><span class="i fa fa-angle-double-right"></span></a></li>' +
'	</ul>' +
'	</div>' +
'</form>';

var tableData = [{"Task":{"id":"1","task":"Task 1","start":"2017-09-25 13:00:00","end":"2017-09-29 13:05:00","user_id":"2","team_id":null,"department_id":null,"status_id":"1","priority":"Critical","created_by":"1","created":"2017-09-23  13:06:20",},"Owner":{"name":"User 1"},"User":{"name":"User...