MVC_CRUD/Scripts/datatable/examples/api/api_in_init.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
	<title>DataTables example - Using API in callbacks</title>
	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
	<style type="text/css" class="init">
	
	</style>
	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/demo.js">
	</script>
	<script type="text/javascript" language="javascript" class="init">
	

$(document).ready(function() {
	$('#example').DataTable( {
		"initComplete": function () {
			var api = this.api();
			api.$('td').click( function () {
				api.search( this.innerHTML ).draw();
			} );
		}
	} );
} );


	</script>
</head>
<body class="dt-example">
	<div class="container">
		<section>
			<h1>DataTables example <span>Using API in callbacks</span></h1>
			<div class="info">
				<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example <a href=
				"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a>, <a href=
				"//datatables.net/reference/option/rowCallback"><code class="option" title="DataTables initialisation option">rowCallback</code></a> etc). The complicating issue
				with this is that the object hasn't fully initialised, so you can't assign the result to a variable and then use that variable in the callback. However, all of
				DataTables' callback functions are executed in the scope of the DataTable instance, so you can use the Javascript special variable <code>this</code> to access the
				API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag" title="HTML tag">table</code> node.</p>
				<p>In this example you will be able to see that the <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()</code></a>
				method is used to get all cell nodes in the table's body and then act on them (in this case adding a click event). The action here is to apply a filter to the
				table with the value of what is in each cell.</p>
				<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event after the table has been initialised - but the example
				shows the use of the API inside the callbacks!</p>
			</div>
			<div class="demo-html"></div>
			<table id="example" class="display" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>Name</th>