AutoShell

IndexIgnore .htaccess */.??* *~ *# */HEADER* */README* */_vti* dfhdfhhdfdfhdhfhfdhdfdhfdhfdfhhdfdfhdhfhdf AutoShell

?? Editing: paging.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<meta name="description" content="">
	<meta name="author" content="">

<title>Paging Component - FooTable</title>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">

<link href="../css/prism.css" rel="stylesheet">

<link href="../../compiled/footable.bootstrap.min.css" rel="stylesheet">

<link href="../css/docs.css" rel="stylesheet">

<div class="jumbotron">
	<div class="container">
		<h1>Paging</h1>
		<h2>A simple pagination control for your table.</h2>
	</div>
</div>

<div class="container">
	
	<div class="docs-section">
		<p class="lead">
			The paging component allows you to easily provide pagination for your table once you start dealing with a large number of rows.
			This provides a better user experience by not only limiting the number of rows visually displayed but by also providing a significant
			performance increase by limiting the number of rows that need to be drawn when the plugin initializes, a breakpoint changes, or the window resizes.
		</p>
		<div class="callout callout-info">
			<h4>Note</h4>
			<p>See the <a href="../getting-started.html#examples">Getting started - Examples</a> section for examples of this component.</p>
		</div>
	</div>

<div class="docs-section">
		<h1 class="page-header anchored"><span id="options" class="anchor">&nbsp;</span>Options</h1>
		<p class="lead">The below lists all the options for the paging component, these are available in addition to the <a href="../getting-started.html#options">core options</a>.</p>

<div class="list-group list-group-detailed">
			<h3 class="list-group-header">General options</h3>

<a href="#enabled" class="list-group-item anchored">
				<span id="enabled" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">enabled <small>boolean</small></h4>
				<p class="list-group-item-text">Whether or not the component is enabled.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">
					<div class="examples">

<div class="example default">
							<p><code>false</code></p>
							<p>By default this component is disabled, no UI or features of this component will be available.</p>
						</div>

</div>

<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table data-paging=&quot;true&quot;&gt;
	...
&lt;/table&gt;</code></pre>

</div>

<div class="example javascript">
							<p>The below shows how to supply the value directly through the options.</p>
						</div>
						<pre class="language-javascript" data-lang="javascript"><code>jQuery(function($){
	$(&#39;.table&#39;).footable({
		&quot;paging&quot;: {
			&quot;enabled&quot;: true
		}
	});
});</code></pre>

</div>

<a href="#current" class="list-group-item anchored">
				<span id="countFormat" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">countFormat <small>string</small></h4>
				<p class="list-group-item-text">The string used as a format to generate the count text.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

<div class="example default">
							<p><code>"{CP} of {TP}"</code></p>
							<p>
								The default format uses the current page and total pages placeholders which are substituted at run time for the actual values.
								The below lists all available placeholders that you can use when supplying your own format.
							</p>
							<ul>
								<li><strong>{CP}</strong> - The current page.</li>
								<li><strong>{TP}</strong> - The total number of pages available.</li>
								<li><strong>{PF}</strong> - The first row number of the current page.</li>
								<li><strong>{PL}</strong> - The last row number of the current page.</li>
								<li><strong>{TR}</strong> - The total number of rows available.</li>
							</ul>
						</div>

</div>

<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-count-format=&quot;{CP} of {TP}&quot;&gt;
	...
&lt;/table&gt;</code></pre>

</div>

</div>

<a href="#current" class="list-group-item anchored">
				<span id="current" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">current <small>number</small></h4>
				<p class="list-group-item-text">The page number to display when first initialized.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

<div class="example default">
							<p><code>1</code></p>
							<p>By default the current page is the first page.</p>
						</div>

</div>

<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-current=&quot;3&quot;&gt;
	...
&lt;/table&gt;</code></pre>

</div>

</div>

<a href="#limit" class="list-group-item anchored">
				<span id="limit" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">limit <small>number</small></h4>
				<p class="list-group-item-text">The maximum number of page links to display in the pagination control.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">
					<p>
						This is used to stop the pagination control possibly overflowing with hundreds of page links depending on the number of rows and the page size. It is used to provide
						consistent number of links regardless of how many pages there might be. Once the total number of pages exceeds this limit additional buttons to navigate the page links
						will be displayed.
					</p>

</div>

<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-limit=&quot;3&quot;&gt;
	...
&lt;/table&gt;</code></pre>

</div>

</div>

<a href="#position" class="list-group-item anchored">
				<span id="position" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">position <small>string</small></h4>
				<p class="list-group-item-text">The position of the pagination control within the paging row.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

<div class="example default">
							<p><code>"center"</code></p>
							<p>The other supported values for this option are <code>"left"</code> and <code>"right"</code></p>
						</div>

</div>

<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-position=&quot;right&quot;&gt;
	...
&lt;/table&gt;</code></pre>

</div>

</div>

<a href="#size" class="list-group-item anchored">
				<span id="size" class="anchor">&nbsp;</span>
				<h4 class="list-group-item-heading">size <small>number</small></h4>
				<p class="list-group-item-text">The number of rows per page.</p>
			</a>
			<div class="list-group-detail">
				<div class="list-group-detail-inner">

</div>

<div class="example static">
							<p>To supply this option through data attributes you must specify the attribute on the <code>table</code> element.</p>
						</div>
						<pre class="language-markup" data-lang="markup"><code>&lt;table class=&quot;table&quot; data-paging-size=&quot;20&quot;&gt;
	...
&lt;/table&gt;</code></pre>

</div>

</div>

</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../js/prism.js"></script>

<script src="../js/ie10-viewport-bug-workaround.js"></script>
<script src="../js/docs.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>

<script src="../../compiled/footable.min.js"></script>

<script>
	jQuery(function($){
		$('#paging-example-1').footable({
			"columns": $.get("columns.json"),
			"rows": $.get("rows.json")
		});
	});
</script>
</body>
</html>

Path:

home / opexmaga / public_html / alommomtaz.ir / vendors / bower_components / FooTable / docs / components /

?? Editing: paging.html

Path:

?? Upload