4 개의 열이있는 매우 간단한 HTML 테이블이 있습니다.
Facility Name, Phone #, City, Specialty사용자가 시설 이름 과 도시 로만 정렬 할 수 있기를 바랍니다 .
jQuery를 사용하여 어떻게 코딩 할 수 있습니까?
답변
모든 종소리와 휘파람을 피하려면 이 간단한 sortElements플러그인을 제안 하십시오 . 용법:
var table = $('table');
$('.sortable th')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
if( $.text([a]) == $.text([b]) )
return 0;
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
그리고 데모. ( “도시”및 “시설”열 머리글을 클릭하여 정렬)
답변
나는 이것을 만나서 2 센트를 던질 것이라고 생각했다. 열 머리글을 클릭하여 오름차순으로 정렬하고 다시 내림차순으로 정렬하십시오.
- Chrome, Firefox, Opera 및 IE에서 작동 (8)
- JQuery 만 사용
- 알파 및 숫자 정렬-오름차순 및 내림차순
$('th').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
<tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>** 업데이트 : 2018
- 관심있는 사람들을 위해 ES6 Plain Javascript 솔루션을 여기에 제공했습니다 .
답변
지금까지 내가 사용한 가장 쉬운 방법은 다음과 같습니다. http://datatables.net/
당신은 (테이블을 구축하고 그것을 다시 포맷 DataTables셔서, IE)를 DOM 교체 경로를 이동하는 경우 놀랍게도 간단 … 단지와 테이블의 서식을 확인 한 후 확인 <thead>하고 <tbody>또는 작동하지 않습니다. 그것은 유일한 문제에 관한 것입니다.
AJAX 등도 지원합니다. 모든 훌륭한 코드 조각과 마찬가지로 모든 코드를 끄는 것도 매우 쉽습니다. 하지만 당신은 당신이 무엇을 사용하는지 놀라게 될 것입니다. 하나의 필드 만 정렬 한 “베어 (bare)”DataTable로 시작한 다음 일부 기능이 실제로 수행중인 기능과 관련이 있음을 깨달았습니다. 고객은 새로운 기능을 좋아합니다.
전체 ThemeRoller 지원을위한 DataTables 보너스 포인트 ….
나는 또한 tableorter와 함께 운이 좋았지 만, 그렇게 쉽지는 않고 문서화가 잘되지 않았으며 ok 기능 만 가지고 있습니다.
답변
우리는이 매끄러운 도구를 사용하기 시작했습니다 : https://plugins.jquery.com/tablesorter/
http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx 에서 사용하는 비디오가 있습니다
.
$('#tableRoster').tablesorter({
headers: {
0: { sorter: false },
4: { sorter: false }
}
});
간단한 테이블로
<table id="tableRoster">
<thead>
<tr>
<th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
<th>User</th>
<th>Verified</th>
<th>Recently Accessed</th>
<th> </th>
</tr>
</thead>
답변
내 대답은 “조심해야”합니다. 많은 jQuery 테이블 정렬 애드온은 브라우저에 전달하는 항목 만 정렬합니다. 대부분의 경우 테이블은 동적 데이터 세트이며 수백만 줄의 데이터 라인을 포함 할 수 있음을 명심해야합니다.
당신은 4 개의 열만 가지고 있다고 언급하지만, 더 중요한 것은 여기서 말하는 행의 수에 대해서는 언급하지 않습니다.
실제 데이터베이스 테이블에 100,000 개의 행이 있다는 것을 알고 데이터베이스에서 브라우저로 5000 줄을 전달하면 내 질문은 테이블을 정렬 할 수있는 요점이 무엇입니까? 적절한 정렬을 수행하려면 쿼리를 데이터베이스로 다시 보내고 데이터베이스 (실제로 데이터를 정렬하도록 설계된 도구)가 정렬을 수행하도록해야합니다.
귀하의 질문에 대한 직접적인 대답으로, 내가 접한 최고의 정렬 추가 기능은 Ingrid입니다. 이 부가 기능이 마음에 들지 않는 데는 여러 가지 이유가 있지만 ( “불필요한 종소리와 호루라기 …”라고 부름) 가장 좋은 기능 중 하나는 아약스를 사용한다는 것입니다. t는 정렬하기 전에 모든 데이터를 이미 전달했다고 가정합니다.
이 답변이 귀하의 요구 사항에 비해 과도하고 (2 년 이상 늦었을 수도 있음) 알고 있지만, 해당 분야의 개발자 가이 시점을 간과하면 화가 나게됩니다. 그래서 나는 다른 누군가가 그것을 받기를 바랍니다.
기분이 나아졌습니다.
답변
이것은 테이블을 정렬하는 좋은 방법입니다.
$(document).ready(function () {
$('th').each(function (col) {
$(this).hover(
function () {
$(this).addClass('focus');
},
function () {
$(this).removeClass('focus');
}
);
$(this).click(function () {
if ($(this).is('.asc')) {
$(this).removeClass('asc');
$(this).addClass('desc selected');
sortOrder = -1;
} else {
$(this).addClass('asc selected');
$(this).removeClass('desc');
sortOrder = 1;
}
$(this).siblings().removeClass('asc selected');
$(this).siblings().removeClass('desc selected');
var arrData = $('table').find('tbody >tr:has(td)').get();
arrData.sort(function (a, b) {
var val1 = $(a).children('td').eq(col).text().toUpperCase();
var val2 = $(b).children('td').eq(col).text().toUpperCase();
if ($.isNumeric(val1) && $.isNumeric(val2))
return sortOrder == 1 ? val1 - val2 : val2 - val1;
else
return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
});
$.each(arrData, function (index, row) {
$('tbody').append(row);
});
});
});
}); table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th>id</th><th>name</th><th>age</th></tr>
<tr><td>1</td><td>Julian</td><td>31</td></tr>
<tr><td>2</td><td>Bert</td><td>12</td></tr>
<tr><td>3</td><td>Xavier</td><td>25</td></tr>
<tr><td>4</td><td>Mindy</td><td>32</td></tr>
<tr><td>5</td><td>David</td><td>40</td></tr>
</table>바이올린은 여기에서 찾을 수 있습니다 :
https://jsfiddle.net/e3s84Luw/
설명은 여기에서 찾을 수 있습니다 :
https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code
답변
나는이 받아 들인 대답을 좋아하지만 거의 HTML 정렬 요구 사항을 얻지 못하고 정렬 방향을 나타내는 아이콘을 추가 할 필요는 없습니다. 수락 응답의 사용 예를 가져 와서 프로젝트에 부트 스트랩을 추가하고 다음 코드를 추가하여 신속하게 수정했습니다.
<div></div>
각 내부 <th>사용자가 아이콘을 설정하는 곳이 너무.
setIcon(this, inverse);
허용 된 답변의 사용법에서 줄 아래에 :
th.click(function () {
그리고 setIcon 메소드를 추가하여 :
function setIcon(element, inverse) {
var iconSpan = $(element).find('div');
if (inverse == false) {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-up');
} else {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-down');
}
$(element).siblings().find('div').removeClass();
}여기 데모가 있습니다. -Firefox 또는 IE에서 데모를 실행하거나 데모가 작동하도록 Chrome의 MIME 유형 검사를 비활성화해야합니다. 허용 된 답변으로 연결된 sortElements 플러그인에 외부 리소스로 의존합니다. 그냥 머리!
