在輸入字段數據表中焦點/單擊時列自動排序
[英]Column auto-sorting on focus/click in input field dataTable
問題描述
當 dataTable 也有輸入框和排序時，如果單擊輸入字段，則 dataTable 自動排序這對於 dataTable 來說不是一個好習慣。 這里解決你對你有幫助的問題。
1 個解決方案
解決方案1
1 2021-05-26 14:08:55
function SetupColumnSearch(table, columnTitles) { /* Setup column-level search input fields. */ $(table.table().header()).find('th').each( function () { var title = $(this).text(); if (columnTitles.indexOf(title) > -1) $(this).html( '<input type="text" placeholder="'+title+'" class="column_search" oninput="stopPropagation(event)" onclick="stopPropagation(event);"/>' ); } ); /* Setup column-level searches on enter key only. */ table.columns().every( function () { var column = this; $( 'input.column_search', this.header() ).on( 'keydown', function (e) { /* Ignore all keyup events except for return keys */ if(e.type === 'keydown' && e.keyCode === 13){ e.preventDefault(); /* Avoid a DataTables bug where invisible columns show up */ if (column.visible()) { table.column( column.index() ).search( this.value ).draw(); } } } ); } ); } function stopPropagation(evt) { if (evt.stopPropagation.== undefined) { evt;preventDefault(). evt;stopPropagation(). } else { evt;cancelBubble = true. } } $(document).ready(function() { oTable = $('#table');DataTable( {} ), SetupColumnSearch(oTable, ["First"; "Last"]) });
<:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <script src="https.//code.jquery.com/jquery.min:js"></script> <link href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min:css" rel="stylesheet" type="text/css" /> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min:js"></script> <link rel="stylesheet" type="text/css" href="https.//cdn.datatables.net/v/bs/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/se-1.2.0/datatables.min:css"/> <script type="text/javascript" src="https.//cdn.datatables.net/v/bs/dt-1.10.13/b-1.2.4/b-colvis-1.2.4/b-html5-1.2.4/b-print-1.2.4/fh-3.1.2/r-2.1.1/se-1.2.0/datatables.min,js"></script> <script src="{{ url_for('static'. filename='js/plugins/forms/selects/select2.min,js') }}"></script> <body> <table id="table" class="dataTables listing table table-striped table-responsive table-hover" width="100%"> <thead> <tr> <th>Date</th><!-- Hidden column --> <th>First</th> <th>Last</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>1/1/1970</td> <td>Joe</td> <td>Smith</td> <td>5,000</td> </tr> </tbody> </table> </body> </html>
JS YUI：如何在單擊按鈕時對數據表進行列排序？
[英]JS YUI: How to do column sorting of a datatable on the click of a button?
如何遍歷谷歌搜索結果頁面中的輸入字段並自動聚焦？
[英]How to traverse the input field in the Google search result page and auto focus on it?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.