बूटस्ट्रैप तालिका फ़िल्टरिंग

काम नहीं कर रहा है मैं बूटस्ट्रैप तालिका के लिए फ़िल्टरिंग जोड़ना चाहता हूं। मैंने दो विशेषताओं को जोड़ा, मैं उन्हें नीचे कोड में गोल करता हूं। यह क्यों काम नहीं कर रहा है? मुझे और क्या करना चाहिए?बूटस्ट्रैप तालिका फ़िल्टरिंग

<table id="clients-table" class="table table-striped table-condensed" 
      data-toggle="table" data-show-toggle="true" data-cache="false" data-show-refresh="true" 
      data-url="../data.json" 
      //----------------------------------------------------- 
      data-filter-control="true" 
      //----------------------------------------------------- 
      data-side-pagination="server" 
      data-search="true" data-sort-name="Id" data-sort-order="desc" 
      data-pagination="true" data-page-size="25"> 
     <thead> 
      <tr> 
       <th data-field="Id" data-sortable="true">Id</th> 
       <th data-field="Email" data-sortable="true">E-Mail</th> 
       <th data-field="CompanyName" data-sortable="true">Firma</th> 
       <th data-field="Name" data-sortable="true">Imię i nazwisko</th> 
       <th data-field="Phone" data-sortable="true">Nr telefonu</th> 
       <th data-field="UserType" data-sortable="true">Typ</th> 
       <th data-field="PricingType" data-sortable="true" 
       //---------------------------------------------------------- 
        data-filter-control="select" 
       //---------------------------------------------------------- 
        >Cennik</th> 
       <th data-field="LastSynchronizationOn" data-sortable="true">Synchronizacja</th> 
      </tr> 
     </thead> 
    </table>

मैं वरना कुछ जे एस सर्वर

$('#clients-table').bootstrapTable({ 
     onLoadError: function (status) { 
      SetErrorMessage('Wystąpił błąd serwera podczas wczytywania danych. Skontaktuj się z administratorem.'); 
     } 
    });

मैं भी इस स्क्रिप्ट

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script> 

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

स्रोत

2015-11-12 Jacek

* एक तरफ: * उन '//' टिप्पणियों के पीछे की कहानी क्या है? एचटीएमएल टिप्पणियां '' – Abhitalks

आप कुछ चुनिंदा फ़िल्टर चाहते हैं संलग्न से सेवा त्रुटि के scipt है, मैं यह काम करता है लगता है:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" type="text/css" href="http://bootstrap-table.wenzhixin.net.cn/assets/bootstrap/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.css"> 
 
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
\t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
\t <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.min.js"></script> 
 
\t <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/locale/bootstrap-table-pl-PL.min.js"></script> 
 

 
\t <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter/bootstrap-table-filter.min.js"></script> 
 
\t <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.min.js"></script> 
 

 
</head> 
 
<body> 
 
<table id="clients-table" class="table table-striped table-condensed" 
 
      data-toggle="table" 
 
      data-show-toggle="true" 
 
      data-cache="false" 
 
      data-show-refresh="true" 
 
      data-url="data.json" 
 
      data-filter-control="true" 
 
      data-side-pagination="server" 
 
      data-search="true" 
 
      data-sort-name="Id" 
 
      data-sort-order="desc" 
 
      data-pagination="true" 
 
      data-page-size="25"> 
 
     <thead> 
 
      <tr> 
 
       <th data-field="Id" data-sortable="true">Id</th> 
 
       <th data-field="Email" data-sortable="true">E-Mail</th> 
 
       <th data-field="PricingType" data-sortable="true" data-filter-control="select">Cennik</th> 
 
       <th data-field="LastSynchronizationOn" data-sortable="true">Synchronizacja</th> 
 
      </tr> 
 
     </thead> 
 
    </table> 
 

 
    <script> 
 
    var $table = $('#clients-table'); 
 
    
 
    $table.bootstrapTable(); 
 
    </script> 
 
</body> 
 
</html>

और अपने data.json:

{ 
 
    "total": 800, 
 
    "rows": [ 
 
    \t { 
 
\t \t "Id": 1, 
 
\t \t "Email": "[email protected]", 
 
\t \t "PricingType": "Value 1", 
 
\t \t "LastSynchronizationOn": "date" 
 
\t }, 
 
\t { 
 
\t \t "Id": 2, 
 
\t \t "Email": "[email protected]", 
 
\t \t "PricingType": "Value 2", 
 
\t \t "LastSynchronizationOn": "date" 
 
\t } 
 
    ] 
 
}

स्रोत

2015-11-16 10:38:27

आपके उत्तर के लिए धन्यवाद, मैंने सीएसएस फाइलें संलग्न की हैं, लेकिन इसके बिना "http://bootstrap-table.wenzhixin.net.cn/assets/bootstrap/css/bootstrap.min.css"। जब मैं इसे लिंक करता हूं तो मुझे सीओआरएस "मूल से फ़ॉन्ट" के बारे में त्रुटि मिलती है http://bootstrap-table.wenzhixin.net.cn 'को क्रॉस-ओरिजिनल रिसोर्स शेयरिंग पॉलिसी द्वारा लोड करने से अवरुद्ध कर दिया गया है: नहीं' एक्सेस-कंट्रोल-अनुमति -ऑर्गिन 'हेडर अनुरोधित संसाधन पर मौजूद है। उत्पत्ति' http: // localhost: 1294 'इसलिए पहुंच की अनुमति नहीं है। " क्या आपको कोई विचार है कि मुझे क्या बदलना चाहिए? – Jacek

आपने डाल दिया: var $ table = $ ('# क्लाइंट-टेबल'); $ Table.bootstrapTable(); –

मैंने अपनी पोस्ट अपडेट की, मेरे पास समान कोड से पहले था। कृपया यह – Jacek

बूटस्ट्रैप तालिका फ़िल्टरिंग

उत्तर

संबंधित मुद्दे