HTML таблица с qrcode в качестве столбца; проблемы с загрузкой на планшет - PullRequest
Новая
       1

HTML таблица с qrcode в качестве столбца; проблемы с загрузкой на планшет

1 голос
/ 29 февраля 2020

У меня есть таблица HTML с QR-кодом в качестве одного из значений столбца; Я использую библиотеку QRcode.min js для преобразования строки в QRcode; 

json = $.parseJSON(JSON.stringify(res.d));
// console.log('data ' , json);
$.each(json, function (i, item) {
    // console.log(item.medicine);console.log(item.Medicine);
    if (item.QrImg1 == null) {
        td1 = $('<td>').text(' ');
    } else {
        td1 = $('<td>').qrcode({ width: 100, height: 100, text: item.QrImg1 })
    }
    if (item.QrImg2 == null) {
        td2 = $('<td>').text(' ');
    } else {
        td2 = $('<td>').qrcode({ width: 100, height: 100, text: item.QrImg2 })
    }
    var $tr = $('<tr>').append(
        $('<td   style="width:30%">').text(item.Medicine),
        $('<td>').text(item.BatchCode),
        td1,
        td2
    ).appendTo('#meds');
}
Это аптечное приложение, в котором отображаются все лекарства вместе с кодом их партии (как QRCode). Им придется быстро найти фильтр по названию лекарства, чтобы нумерация страниц не помогла. Проблема в том, что у меня около 6000+ строк, поэтому при загрузке это занимает время, особенно на планшете. Есть ли способ, как я могу загрузить это быстрее.

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020 

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
  <table id="example">
  <thead>
    <tr><th class="site_name">Name</th><th>Url </th><th>Type</th><th>Last modified</th></tr>
  </thead>
  <tbody>
  </tbody>
</table>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
  <script>
  


$("#example").dataTable({
  "aaData":[
    ["Sitepoint","http://sitepoint.com","Blog","2013-10-15 10:30:00"],
    ["Flippa","http://flippa.com","Marketplace","null"],
    ["99designs","http://99designs.com","Marketplace","null"],
    ["Learnable","http://learnable.com","Online courses","null"],
    ["Rubysource","http://rubysource.com","Blog","2013-01-10 12:00:00"]
  ],
  "aoColumnDefs":[{
        "sTitle":"Site name"
      , "aTargets": [ "site_name" ]
  },{
        "aTargets": [ 1 ]
      , "bSortable": false
      , "mRender": function ( url, type, full )  {
          return  '<a href="'+url+'">' + url + '</a>';
      }
  },{
        "aTargets":[ 3 ]
      , "sType": "date"
      , "mRender": function(date, type, full) {
          return (full[2] == "Blog") 
                    ? new Date(date).toDateString()
                    : "N/A" ;
      }  
  }]
});
  </script>
</body>
</html>
0 голосов
/ 29 февраля 2020

если вы получаете данные один раз с сервера и выполняете поиск на стороне клиента из таблицы, то jquery .DataTables поможет вам отфильтровать строки https://datatables.net/

многие параметры настраивают вид таблицы и функции, такие как сортировка / поиск / группа

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...