как вызвать класс плагина jQuery внутри javascript

Я хочу сортировать таблицу, используя плагин Tablesort jQuery.как вызвать класс плагина jQuery внутри javascript

Мой HTML, имеет выберите тег, при изменении любого параметра вызывается searchXML функция() из my.js ..

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 
    Select an option: 
    <select onchange="searchXML()" id="input"> 
     <option></option> 
     <option value="milk">Milk</option> 
     <option value="tea">Tea</option> 
     <option value="sugar">Sugar</option> 
     <option value="juice">Juice</option> 
     <option value="all">All</option> 
    </select> 

    <br /> 
    <div id="results"> 
    </div> 

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/my.js" type="text/javascript"></script> 
    <script src="js/jquery.tablesorter.min.js"></script> 
    <script src="js/jquery.tablesorter.widgets.min.js"></script> 
</body> 
</html>

My JavaScript, покажет таблицу. но я хочу добавить функцию сортировки в свою таблицу с помощью плагина Tablesort, поэтому я включил class = "tablesorter" в свой тег таблицы. но TableSorter не работает ...

var product=[]; 
var quantity=[]; 
var date=[]; 
var grossprice=[]; 
var profit=[]; 
var divText=[]; 

function searchXML() 
{ 

    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
     else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.open("GET","xml/test.xml",false); 
    xmlhttp.send(); 
    xmlDoc=xmlhttp.responseXML; 

    x=xmlDoc.getElementsByTagName("ProductName"); 
      input = document.getElementById("input").value; 
      size = input.length; 
      divText="" 
      if (input == "") 
      { 
       document.getElementById("results").innerHTML= "Please select a Product Name!"; 
       return false; 
      } 
      if (input === "all") 
      { 
       var y=xmlDoc.getElementsByTagName("entry"); 
        for (i=0;i<y.length;i++) 
        { 
          date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue; 
          product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue; 
          quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue; 
          grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue; 
          profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue; 
          if (divText==="") 
          { 
          divText="<h2>The product details are:</h2><br /><table border=1 class=\"tablesorter\">"; 
          divText+="<tr><th width=150>Date</th><th width=150>Product</th><th width=200>Quantity</th><th width=200>Gross Price</th><th width=200>Profit</th></tr>"; 
          } 
          divText += "<tr><td width=150 align=center>" + date + "</td><td width=150 align=center>" + product + "</td><td width=200 align=center>" + quantity + "</td><td width=200 align=center>" + grossprice + "</td><td width=200 align=center>" + profit + "</td></tr>"; 
        } 
     } 

      for (i=0;i<x.length;i++) 
      { 
       startString = x[i].childNodes[0].nodeValue; 
       if (startString.toLowerCase() == input.toLowerCase()) 
       { 
        date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue; 
        product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue; 
        quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue; 
        grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue; 
        profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue; 
        if (divText==="") 
        { 
        divText="<h2>The product details are:</h2><br /><table border=1 class=\"tablesorter\">"; 
        divText+="<tr><th width=150>Date</th><th width=150>Product</th><th width=200>Quantity</th><th width=200>Gross Price</th><th width=200>Profit</th></tr>"; 
        } 
        divText += "<tr><td width=150 align=center>" + date + "</td><td width=150 align=center>" + product + "</td><td width=200 align=center>" + quantity + "</td><td width=200 align=center>" + grossprice + "</td><td width=200 align=center>" + profit + "</td></tr>"; 
       } 
      } 
      if (divText=="") 
      { 
       divText = "<h2>The product does not exist.</h2>";    
      } 
      else 
      { 
       divText+="</table>"; 
      } 
      document.getElementById("results").innerHTML= divText; 

} 

divText2=$(divText); 
divText2.tablesorter();

мой XML

<?xml version="1.0" encoding="UTF-8"?> 
<item> 
     <entry> 
     <ProductName>milk</ProductName> 
     <Date>2/10/2007</Date> 
     <Quantity>20</Quantity> 
     <GrossPrice>100</GrossPrice> 
     <Profit>20</Profit> 
     </entry> 
     <entry> 
     <ProductName>sugar</ProductName> 
     <Date>2/09/2009</Date> 
     <Quantity>45</Quantity> 
     <GrossPrice>1000</GrossPrice> 
     <Profit>100</Profit> 
     </entry> 
     <entry> 
     <ProductName>sugar</ProductName> 
     <Date>2/09/2010</Date> 
     <Quantity>40</Quantity> 
     <GrossPrice>600</GrossPrice> 
     <Profit>50</Profit> 
     </entry> 
     <entry> 
     <ProductName>milk</ProductName> 
     <Date>1/01/2001</Date> 
     <Quantity>10</Quantity> 
     <GrossPrice>50</GrossPrice> 
     <Profit>10</Profit> 
     </entry> 
     <entry> 
     <ProductName>tea</ProductName> 
     <Date>2/09/2009</Date> 
     <Quantity>45</Quantity> 
     <GrossPrice>1000</GrossPrice> 
     <Profit>100</Profit> 
     </entry> 
     <entry> 
     <ProductName>tea</ProductName> 
     <Date>2/09/2010</Date> 
     <Quantity>4</Quantity> 
     <GrossPrice>10</GrossPrice> 
     <Profit>1</Profit> 
     </entry> 
     <entry> 
     <ProductName>juice</ProductName> 
     <Date>2/09/2014</Date> 
     <Quantity>40</Quantity> 
     <GrossPrice>1000</GrossPrice> 
     <Profit>100</Profit> 
     </entry> 
</item>

, как это исправить? Спасибо

источник

2014-12-19 kuljit k

divText="<h2>The product details are:</h2><br /><table border=1 class="tablesorter">";

должно быть:

divText="<h2>The product details are:</h2><br /><table border=1 class=\"tablesorter\">";

Вы добавления divText и вы применили TableSorter() для divText2. Измените код следующим образом: -

после окончательного еще условия удаления document.getElementById("results").innerHTML= divText;
Вставьте этот код: -

var divText2 = $(divText); divText2.tablesorter(); $("#results").append(divText2);

Working fiddle example

источник

2014-12-19 08:48:27

Спасибо .. Это не показывает никаких ошибок, и таблица также показывает .., но плагин не работает ... –

Просто определение class = "tablesorter" не инициирует tablesorter, вам также нужно инициировать его. прямо сейчас divText - это строка. Сделайте его jquery-объектом, определив его как 'divText2 = $ (divText)' (сделайте его осторожно), затем инициализируйте его как 'divText2.tablesorter()' –

Спасибо ... Я просто определяю, как вы сказали последнему из моего JavaScript ... но все равно не работает ... Можете ли вы объяснить мне, как ... –

как вызвать класс плагина jQuery внутри javascript

ответ

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