Могу ли я отсортировать статическую таблицу html с помощью angularJS/Jquery/Javascript?

Фоновая информация заключается в том, что у меня есть таблица, которая должна быть статической информацией, а не javascript. Таблица будет отредактирована людьми, которые не знают HTML или Javascript. Поэтому каждый раз, когда они получают нового члена факультета, они собираются перескакивать и редактировать графическое представление таблицы. Я создал код того, что будет экспортироваться после редактирования.Могу ли я отсортировать статическую таблицу html с помощью angularJS/Jquery/Javascript?

Вот HTML-разметка того, что будет экспортироваться, когда пользователь будет добавлять людей.

http://codepen.io/ddavisgraphics/pen/VYWmRo

<div class="searchTable"> 
<label> Search Directory: </lable> 
<input id="mysearch" type="search" /> 
</div> 

<select> 
    <option> History </option> 
    <option> English </option> 
    <option> Economics </option> 
    <option> Computer Science </option> 
    <option> Business </option> 
    <option> Foreign Languages </option> 
    <option> Sociology </option> 
    <option> Nursing </option> 
    <option> Criminal Justice </option> 
    <option> Management </option> 
    <option> Public Relations </option> 
    <option> Communications </option> 
</select> 

<select> 
    <option> West Viringia University </option> 
    <option> Fairmont State University </option> 
    <option> University of Charleston </option> 
    <option> Glenville State College </option> 
    <option> Shepherd University </option> 
    <option> Wheeling Jesuit University </option> 
    <option> Marshall University </option> 
    <option> WVU-Parkersburg </option> 
    <option> Davis & Elkins College </option> 
    <option> Concord University </option> 
    <option> Bluefield State College </option> 
    <option> Salem International University </option> 
    <option> Concord University </option> 
    <option> Concord University </option> 
    <option> Concord University </option> 
    <option> Concord University </option> 
</select> 


<table> 
<tbody><tr> 
    <th>Name</th> 
    <th>Address</th> 
    <th>Discipline</th> 
    </tr> 

    <tr> 
    <td>Katherine B. Aaslestad</td> 
    <td>West Virginia University</td> 
<td>History</td> 
    </tr> 

    <tr> 
    <td>Sarah J. Adams</td> 
    <td>University of Charleston</td> 
<td>History</td> 
    </tr> 

    <tr> 
    <td>Patrick Albano</td> 
    <td>Fairmont State University </td> 
<td>History</td> 
    </tr> 

    <tr> 
    <td>Timothy C. Alderman</td> 
    <td>WV State University</td> 
<td>English</td> 
    </tr> 

    <tr> 
    <td>Cyrus M. Aleseyed</td> 
    <td>WV State University</td> 
<td>Economics</td> 
    </tr> 

<tr> 
    <td>Heather R. Allman</td> 
    <td>Glenville State College </td> 
<td>Computer Science </td> 
    </tr> 

<tr> 
    <td>Mohamed Alshallah</td> 
    <td>Fairmont State University</td> 
<td>Business</td> 
    </tr> 

<tr> 
    <td>Maria Amores</td> 
    <td>West Virginia University</td> 
<td>Foreign Languages </td> 
    </tr> 

<tr> 
    <td>Robert M. Anthony</td> 
    <td>Shepherd University 
</td><td>Sociology</td> 
    </tr> 
<tr> 
    <td>Gary L. Arbogast</td> 
    <td>Glenville State College</td> 
<td>Economics</td> 
</tr> 
<tr> 
    <td>James R. Ashton</td> 
    <td>Wheeling Jesuit University </td> 
<td>Foreign Languages </td> 
</tr> 
<tr> 
    <td>Debra Baker</td> 
    <td><span class="caps">WVU</span>-Parkersburg </td> 
<td>Business</td> 
</tr> 
<tr> 
    <td>J. Robert Baker</td> 
    <td>Fairmont State University </td> 
<td>English</td> 
</tr> 
<tr> 
    <td>Debra Barker</td> 
    <td><span class="caps">WVU</span>-Parkersburg</td> 
<td>Nursing</td> 
</tr> 
<tr> 
    <td>Dorman C. Batson</td> 
    <td>Glenville State College </td> 
<td>Business</td> 
</tr> 
<tr> 
    <td>Amy Otley Beckett</td> 
    <td>Glenville State College </td> 
<td>Criminal Justice </td> 
</tr> 
<tr> 
    <td>Marybeth Beller</td> 
    <td>Marshall University </td> 
<td>Political Science </td> 
</tr> 
<tr> 
    <td>Helen Benigni</td> 
    <td>Davis &amp; Elkins College</td> 
<td>English</td> 
</tr> 
<tr> 
    <td>Roland W. Bergman</td> 
    <td>Shepherd University </td> 
<td>Geography</td> 
</tr> 
<tr> 
    <td>Jonathan Berkey</td> 
    <td>Concord University</td> 
<td>History</td> 
</tr> 
<tr> 
    <td>Sheli Bernstein-Goff</td> 
    <td>West Liberty University</td> 
<td>Social Work </td> 
</tr> 
<tr> 
    <td>Ingrid Bircann-Barkey</td> 
    <td>Fairmont State University</td> 
<td>Spanish</td> 
</tr> 
<tr> 
    <td>Michael Blackwell</td> 
    <td>West Liberty University </td> 
<td>Accounting</td> 
</tr> 
<tr> 
    <td>Les Boggess</td> 
    <td>Fairmont State University</td> 
<td>Criminal Justice </td> 
</tr> 
<tr> 
    <td>Dhruba J. Bora/td&gt; 
    </td><td>Marshall University </td> 
<td>Criminal Justice</td> 
</tr> 
<tr> 
    <td>Steve Bourne</td> 
    <td>Bluefield State College </td> 
<td>Management</td> 
</tr> 
<tr> 
    <td>Daniel Boyd</td> 
    <td>WV State University</td> 
<td>Communications</td> 
</tr> 
<tr> 
    <td>Susan Braidi</td> 
    <td>West Virginia University</td> 
<td>Foreign Languages </td> 
</tr> 
<tr> 
    <td>Pam Braden</td> 
    <td><span class="caps">WVU</span>-Parkersburg </td> 
<td>Nursing</td> 
</tr> 
<tr> 
    <td>Gonzalo Bravo</td> 
    <td>West Virginia University</td> 
<td>Sport Management </td> 
</tr> 
<tr> 
    <td>Robin Broughton</td> 
    <td>WV State University</td> 
    <td> </td> 
</tr> 
<tr> 
    <td>Stephen W. Brown</td> 
    <td><span class="caps">WVU</span> Institute of Technology </td> 
<td>History</td> 
</tr> 
<tr> 
    <td>Rick E. Bruner</td> 
    <td>Shepherd University</td> 
<td>Art</td> 
</tr> 
<tr> 
    <td>Maria Cristina Burgueno</td> 
    <td>Marshall University</td> 
<td>Spanish</td> 
</tr> 
<tr> 
    <td>Jeffrey Byrd</td> 
    <td><span class="caps">WVU</span> at Parkersburg</td> 
<td>Theatre</td> 
</tr> 
<tr> 
    <td>Kevin Cain</td> 
    <td>Glenville State College</td> 
<td>Education</td> 
</tr> 
<tr> 
    <td>Richard Cain</td> 
    <td>Wheeling Jesuit University</td> 
<td>Communications</td> 
</tr> 
<tr> 
    <td>Steven Carelli</td> 
    <td>Bethany College </td> 
<td>Political Science </td> 
</tr> 
<tr> 
    <td>Marvin H. Carr</td> 
    <td>West Virginia Wesleyan College</td> 
<td>History</td> 
</tr> 
<tr> 
    <td>Thomas Chadwick</td> 
    <td>Davis &amp; Elkins College </td> 
<td>Political Science</td> 
</tr> 
<tr> 
    <td>Cynthia Chalupa</td> 
    <td>West Virginia University </td> 
<td>Foreign Languages </td> 
</tr> 
<tr> 
    <td>Gregory Chase</td> 
    <td>West Liberty University </td> 
<td>Economics and Finance</td> 
</tr> 
<tr> 
    <td>Angela Cline</td> 
    <td>Glenville State College</td> 
<td>Business Administration </td> 
</tr> 
<tr> 
    <td>Darrin Cox</td> 
    <td>West Liberty University</td> 
<td>History</td> 
</tr> 
<tr> 
    <td>Brian Crawford</td> 
    <td>West Liberty University </td> 
<td>Geography</td> 
</tr> 
<tr> 
    <td>Geri Crawley-Woods</td> 
    <td>Shepherd University</td> 
<td>Social Work </td> 
</tr> 
<tr> 
    <td>Stephen Cresswell</td> 
    <td>West Virginia Wesleyan College </td> 
<td>History</td> 
</tr> 
<tr> 
    <td>Gordon Crews</td> 
    <td>Marshall University</td> 
<td>Criminal Justice </td> 
</tr> 
<tr> 
    <td>Scott Crichlow</td> 
    <td>West Virginia University </td> 
<td>Political Science </td> 
</tr> 
<tr> 
    <td>Aaron Crites</td> 
    <td><span class="caps">WVU</span>-Parkersburg </td> 
<td>Political Science, History </td> 
</tr> 
<tr> 
    <td>Karen Culcasi</td> 
    <td>West Virginia University</td> 
<td>Geography</td> 
</tr> 
<tr> 
    <td>Sandra Czernek</td> 
    <td>West Liberty University </td> 
<td>History</td> 
</tr> 
<tr> 
    <td>Momodou N. Darboe</td> 
    <td>Shepherd University </td> 
<td>Sociology</td> 
</tr> 
<tr> 
    <td>S. Dianne Davis</td> 
    <td><span class="caps">WVU</span>-Parkersburg</td> 
<td>Business</td> 
</tr> 
<tr> 
    <td>Tamra Dearing</td> 
    <td>Bridgemont Community &amp; Technical College </td> 
<td>Business, Computer Science, 
Entrepreneurship</td> 
</tr> 
<tr> 
    <td>Frank L. DeCaria</td> 
    <td>WV Northern Community College </td> 
<td>Political Science/History </td> 
</tr> 
<tr> 
    <td>Dominick A. DeFilippis</td> 
    <td>Wheeling Jesuit University </td> 
<td>Foreign Languages </td> 
</tr> 
<tr> 
    <td>Lisa DeFrank-Cole</td> 
    <td>West Virginia University</td> 
<td>Leadership Studies </td> 
</tr> 
<tr> 
    <td>Arthur DeMatteo</td> 
    <td>Glenville State College </td> 
<td>History</td> 
</tr> 
<tr> 
    <td>Kimberly DeTardo-Bora</td> 
    <td>Marshall University </td> 
<td>Criminology</td> 
</tr> 
<tr> 
    <td>Amy DeWitt</td> 
    <td>Shepherd University </td> 
<td>Sociology</td> 
</tr> 
<tr> 
    <td>Sandra Dixon</td> 
    <td>West Virginia University</td> 
<td>Foreign Languages</td> 
</tr> 
<tr> 
    <td>Christopher L. Dolmetsch</td> 
    <td>Marshall University</td> 
<td>Foreign Languages </td> 
</tr> 
<tr> 
    <td>Miriam Roth Douglas</td> 
    <td>West Liberty University </td> 
<td>Education</td> 
</tr> 
<tr> 
    <td>Carmen M. Durrani</td> 
    <td>Concord University</td> 
<td>Foreign Languages </td> 
</tr> 
<tr> 
    <td>Marie DuToit </td> 
    <td>West Liberty University </td> 
<td>Nursing</td> 
</tr> 
<tr> 
    <td>Robert D. Duval</td> 
    <td>West Virginia University</td> 
<td>Political Science </td> 
</tr> 
<tr> 
    <td>Martha Eborall</td> 
    <td>Bluefield State College </td> 
    <td>Environmental Science/Biology </td> 
</tr> 
<tr> 
    <td>Clark Egnor</td> 
    <td>Marshall University </td> 
    <td><span class="caps">TESOL</span>; Education Administration </td> 
</tr> 
<tr> 
    <td>Nadezhda Esque</td> 
    <td>Marshall University </td> 
    <td><span class="caps">EFL</span></td> 
</tr> 
<tr> 
    <td>Xiaoli Etienne</td> 
    <td>West Virginia University </td> 
    <td>Ag and Resource Economics</td> 
</tr> 
<tr> 
    <td>Sonya Evanisko</td> 
    <td>Shepherd University </td> 
    <td>Art</td> 
</tr> 
<tr> 
    <td>Joe Evans</td> 
    <td>Glenville State College </td> 
    <td>Science Education/Physical Science </td> 
</tr> 
<tr> 
    <td>Sergio Falconi</td> 
    <td>Fairmont State University </td> 
    <td>Italian</td> 
</tr> 
<tr> 
    <td>Christina Fattore</td> 
    <td>West Virginia University </td> 
    <td>International Relations</td> 
</tr> 
<tr> 
    <td>Stacy S. Fint</td> 
    <td>West Virginia University</td> 
    <td><span class="caps">TESOL</span></td> 
</tr> 
<tr> 
    <td>Elizabeth Fones-Wolf</td> 
    <td>West Virginia University3 </td> 
    <td>History</td> 
</tr> 
<tr> 
    <td>Trevellya (Tee) Ford-Ahmed</td> 
    <td>WV State University</td> 
    <td>Communication &amp; Media Studies </td> 
</tr> 
<tr> 
    <td>Shirley Fortney</td> 
    <td>West Virginia Wesleyan College </td> 
    <td>Education</td> 
</tr> 
<tr> 
    <td>Connie Morris Fox</td> 
    <td>Bridgemont <span class="caps">CTC</span> </td> 
    <td>Business</td> 
</tr> 
<tr> 
    <td>Carl M. Frasure</td> 
    <td>Fairmont State University </td> 
    <td>Political Science </td> 
</tr> 
<tr> 
    <td>Nicholas Freidin</td> 
    <td>Marshall University </td> 
    <td>Anthropology</td> 
</tr> 
<tr> 
    <td>James J. Friedberg</td> 
    <td>West Virginia University </td> 
    <td>Law</td> 
</tr> 
<tr> 
    <td>Mary Frye</td> 
    <td>WV State University </td> 
    <td>Foreign Languages </td> 
</tr> 
<tr> 
    <td>Aaron Gale</td> 
    <td>West Virginia University </td> 
    <td>Religion</td> 
</tr> 
<tr> 
    <td>Pablo Garcia</td> 
    <td>West Virginia University </td> 
    <td>Spanish</td> 
</tr> 
<tr> 
    <td>Richard A. Garnett</td> 
    <td>Marshall University</td> 
    <td>Sociology</td> 
</tr> 
<tr> 
    <td>Patricia Gaston</td> 
    <td><span class="caps">WVU</span>-Parkersburg </td> 
    <td>English</td> 
</tr> 
<tr> 
    <td>Kathryn G. Arano Gazal</td> 
    <td>West Virginia University</td>  
<td>Forestry/Ecology </td> 
</tr> 
<tr> 
    <td>Rico M. Gazal</td> 
    <td>Glenville State College</td> 
    <td>Forestry/Ecology </td> 
</tr> 
<tr> 
    <td>Saba Gebrehiwot</td> 
    <td>Marshall University </td> 
    <td>German, African Politics </td> 
</tr> 
<tr> 
    <td>Hannah Geffert</td> 
    <td>Shepherd University </td> 
    <td>History/Political Science</td> 
</tr> 
<tr> 
    <td>Michael Gherke</td> 
    <td>Glenville State College </td> 
    <td>History</td> 
</tr> 
<tr> 
    <td>Megan Gibbons</td> 
    <td>Glenville State College </td> 
    <td>Hispanic Language and Literature</td> 
</tr> 
<tr> 
    <td>Tuncer Gocmen</td> 
    <td>Shepherd University</td> 
    <td>Economics</td> 
</tr> 
<tr> 
    <td>Pablo Gonzalez</td> 
    <td>West Virginia University </td> 
    <td>Foreign Language </td> 
</tr> 
<tr> 
    <td>David B. Gordon</td> 
    <td>Shepherd University</td> 
    <td>History</td> 
</tr> 
<tr> 
    <td>Lindsey Graham</td> 
    <td>Davis and Elkins College</td> 
    <td>Sociology of Religion </td> 
</tr> 
<tr> 
    <td>Marshall Griffin</td> 
    <td><span class="caps">WVU</span>-Parkersburg</td> 
    <td>Biology</td> 
</tr> 
<tr> 
    <td>Kelly Grose</td> 
    <td>Bridgemont Community College</td> 
    <td> </td> 
</tr> 
<tr> 
    <td>Max Guirguis</td> 
    <td>Shepherd University </td> 
    <td>Constitutional Law</td> 
</tr> 
<tr> 
    <td>Dan Gurash</td> 
    <td>Fairmont State University </td> 
    <td>Sociology/Geography</td> 
</tr> 
<tr> 
    <td>Joe D. Hagan</td> 
    <td>West Virginia University</td> 
    <td>Political Science </td> 
</tr> 
<tr> 
    <td>Joshua Hagen</td> 
    <td>Marshall University</td> 
    <td>Geography</td> 
</tr> 
<tr> 
    <td>Frew Hailou</td> 
    <td>West Virginia State University</td> 
    <td>International Trade &amp; Development </td> 
</tr> 
<tr> 
    <td>Homan Hajiran</td> 
    <td>Wheeling Jesuit University</td> 
    <td>Economics</td> 
</tr> 
<tr> 
    <td>Shannon Halicki</td> 
    <td>West Liberty University</td> 
    <td>French, Spanish, Linguistics </td> 
</tr> 
<tr> 
    <td>Jonathan Hall</td> 
    <td>West Virginia University </td> 
    <td>Ecology</td> 
</tr> 
<tr> 
    <td>Deborah Halsey-Hunter</td> 
    <td>Bluefield State College </td> 
    <td>Technology/Business Communications</td> 
</tr> 
<tr> 
    <td>Jack L. Hammersmith</td> 
    <td>West Virginia University </td> 
    <td>History</td> 
</tr> 
<tr> 
    <td>Amy A. Garzon Hampton</td> 
    <td>Shepherd University </td> 
    <td>Social Work </td> 
</tr> 
<tr> 
    <td>Wes Harrison</td> 
    <td>Ohio Valley College </td> 
    <td>History/Political Science </td> 
</tr> 
<tr> 
    <td>Clifford Hawley</td> 
    <td>West Virginia University </td> 
    <td>Economics</td> 
</tr> 
<tr> 
    <td>Dwight Heaster</td> 
    <td>Glenville State College </td> 
    <td>Business</td> 
</tr> 
<tr> 
    <td>Anders Henriksson</td> 
    <td>Shepherd University </td> 
    <td>History</td> 
</tr> 
<tr> 
    <td>Susan Herrick</td> 
    <td>West Liberty University </td> 
    <td>Sociology</td> 
</tr> 
<tr> 
    <td>John Hicks</td> 
    <td>Alderson-Broaddus University </td> 
    <td>History/Political Science</td> 
</tr> 
<tr> 
    <td>Ellessa High</td> 
    <td>West Virginia University </td> 
    <td>English</td> 
</tr> 
<tr> 
    <td>Geneva K. Hines</td> 
    <td>Fairmont State University </td> 
    <td><span class="caps">ESL</span>/Advising</td> 
</tr> 
<tr> 
    <td>Erin Hippolyte</td> 
    <td>Fairmont State University </td> 
    <td>French</td> 
</tr> 
<tr> 
    <td>Dominique Hoche</td> 
    <td>West Liberty University </td> 
    <td>English</td> 
</tr> 
<tr> 
    <td>Daniel Holbrook</td> 
    <td>Marshall University </td> 
    <td>History </td> 
</tr> 
<tr> 
    <td>Jeff Holland</td> 
    <td><span class="caps">WVU</span>-Parkersburg </td> 
    <td>Business</td> 
</tr> 
<tr> 
    <td>Aart Holtslag</td> 
    <td>Shepherd University </td> 
    <td>International Relations</td> 
</tr> 
<tr> 
    <td>Gerald Hough</td> 
    <td>New River Community &amp; Technical College </td> 
    <td>Business</td> 
</tr> 
<tr> 
    <td>Sally Howard</td> 
    <td>Concord University </td> 
    <td>Political Science </td> 
</tr> 
<tr> 
    <td>Chiquita Howard-Bostic</td> 
    <td>Shepherd University </td> 
    <td>Sociology</td> 
</tr> 
<tr> 
    <td>Debra Hull</td> 
    <td>Wheeling Jesuit University </td> 
    <td>Psychology </td> 
</tr> 
<tr> 
    <td>Geoff Hunter</td> 
    <td>Bluefield State College </td> 
    <td>Management</td> 
</tr> 
<tr> 
    <td>Susan Hunter</td> 
    <td>West Virginia University </td> 
    <td>Political Science</td> 
</tr> 
</tbody></table>

Я смотрел несколько вариантов, которые просто сортировать таблицу по в порядке возрастания или убывания, но мне нужно, чтобы иметь возможность поиска и сортировки по конкретным вариантам. Как показано на Codepen.

Я знаю, что могу использовать угловые при загрузке таблицы с помощью ng-repeat, но не знаю, как это сделать со статическими табличными данными. Поэтому использование углового может быть не лучшим решением.

Мой вопрос в том, что потенциально было бы хорошим решением, которое работает таким же образом, что угловой скрывает и показывает divs, которые не являются частью критериев поиска.

источник

2015-01-23 David J. Davis

[Tablesorter] (http://tablesorter.com/docs/) –

Многие плагины таблиц работают над существующим html. Просто создайте директиву для инициализации одного из них. Тем не менее, 'должен быть статичным' частью вашего вопроса. Кажется очень маловероятным, что кто-то поддерживает эту таблицу вручную в html – charlietfl

@charlietfl люди, которые будут редактировать таблицу, не знают никакого кода или синтаксиса, они будут использовать CMS, который будет экспортировать в HTML, все это будет вручную введенный в CMS. –

Если вы хотите использовать угловой для всей таблицы это довольно тривиально для разбора HTML, полученной от AJAX запроса в массив объектов, пригодных для угловых связывания данных, а также для многочисленных доступных угловых директив таблицы

var cellProperties = ['name', 'address', 'discipline'] 

    $http.get('table.html').success(function(data) { 
    /* using jQuery for quick demo, easy enough to convert if needed*/ 
    var $tableRows = $(data).find('tr'); 
    $scope.tableData = $tableRows.map(function(row) { 
     var row = {}; 
     $(this).children().each(function(cellIndex) { 
     row[cellProperties[cellIndex]] = $(this).text() 
     }); 
     return row 
    }).get(); 

    }); 

// returns  
[{ 
    "name": "Katherine B. Aaslestad", 
    "address": "West Virginia University", 
    "discipline": "History" 
    }, 
    ....]

У меня не было времени, чтобы разобрать строку заголовков, но легко адаптировать это, чтобы сделать это.

Это также довольно просто сделать в большинстве языков сервера с использованием библиотеки дом парсер

DEMO

источник

2015-01-23 17:17:55 charlietfl

Это действительно плохая практика, чтобы люди редактировать HTML таблицы данных. Я хотел бы создать массив, который легко readible для любого человека, чтобы они могли изменить его:

var categoryData = [ 
    "History", 
    "English", 
    "Economics", 
    "Computer Science" 
    // and so on... 
]; 

var universitiesData = [ 
    "West Virginia University", 
    "Fairmont State University", 
    "University of Charleston" 
    // and so on... 
]

Тогда вы можете прикрепить его в $scope.categoriesData и $scope.universitiesData и использовать ng-repeat на нем для сортировки и фильтра и т.д.

источник

2015-01-23 17:46:19 AskYous

Могу ли я отсортировать статическую таблицу html с помощью angularJS/Jquery/Javascript?

ответ

Смежные вопросы