如何將元素的id傳遞給.js文件？

我正在使用DataTables，並且發現瞭如何將其UI翻譯成西班牙語。因爲我不想把這個翻譯代碼，每次我創建使用數據表視圖做什麼，我已決定將下面的代碼保存到一個單獨的.js文件：如何將元素的id傳遞給.js文件？

$(document).ready(function() { 
    $('#table_id').DataTable({ 
     "language":{ 
      "lengthMenu":"Mostrar _MENU_ registros por página.", 
      "zeroRecords": "Lo sentimos. No se encontraron registros.", 
      "info": "Mostrando página _PAGE_ de _PAGES_", 
      "infoEmpty": "No hay registros aún.", 
      "infoFiltered": "(filtrados de un total de _MAX_ registros)", 
      "search" : "Búsqueda", 
      "LoadingRecords": "Cargando ...", 
      "Processing": "Procesando...", 
      "SearchPlaceholder": "Comience a teclear...", 
      "paginate": { 
       "previous": "Anterior", 
       "next": "Siguiente", 
       } 
     } 
    }); 
});

然後我會通過調用這個文件您使用JavaScript代碼如下：

<script src="{{URL::asset('DataTables-1.10.7/media/js/dataTables.MX_es.js')}}"></script>

我不知道我怎麼會通過相關的標識#table_id到我的js文件的這一呼籲。

我現在得到的臨時解決方案是將此標識符固定爲（#table_id）... 但是，如果我必須在視圖內使用多個數據表，我該怎麼辦？

這就是爲什麼我需要通過id作爲變量和.js文件應該捕捉它。

我該怎麼做？

來源

2015-06-04 Pathros

解決方案1： 聲明一個全局變量的數據表中的ID，並在腳本文件中使用它，這樣的工作只有一個數據表，但你可以使用全局聲明的一組ID，並在它們之間迭代你的.js文件，併爲每個ID調用你的例程，如果你想讓它適用於多個數據表。然而，使用全局變量不受鼓勵，但這會做到這一點。

<script> var myGlobalPlaceholder = "#myDatatable"; </script> 
<script src="{{URL::asset('DataTables-1.10.7/media/js/dataTables.MX_es.js')}}"></script>

解決方案2： 既然你需要你爲什麼不放在一個單獨的.js文件中下面的代碼來做到這一點的不止一個數據表中的單個頁面上可以說initializer.js：

//File: initializer.js: 
    var spanishDatatableInitializer =function(table_id) 
    { 
     $(table).DataTable({ 
       "language":{ 
        "lengthMenu":"Mostrar _MENU_ registros por página.", 
        "zeroRecords": "Lo sentimos. No se encontraron registros.", 
        "info": "Mostrando página _PAGE_ de _PAGES_", 
        "infoEmpty": "No hay registros aún.", 
        "infoFiltered": "(filtrados de un total de _MAX_ registros)", 
        "search" : "Búsqueda", 
        "LoadingRecords": "Cargando ...", 
        "Processing": "Procesando...", 
        "SearchPlaceholder": "Comience a teclear...", 
        "paginate": { 
         "previous": "Anterior", 
         "next": "Siguiente", 
         } 
       } 
      }); 
    }

然後包括在您查看的文件是這樣的：

<script type="text/javascript" src="initializer.js"></script>

而該頁面的具體。js文件要求每個數據表中的ID在你的觀點，即功能：

$(document).ready(function() { 
    spanishDatatableInitializer("#tableId1"); 
    spanishDatatableInitializer("#tableId2"); 
})

解決方案3： 作爲azium建議，使用共同的前綴名稱爲您的數據表ID，如"#my_datatable_*******"並在js文件做到這一點：

$(document).ready(function() { 
var dataTables = []; 

$("div[id^='#my_datatable_']").each(function(){ 
    // dataTables.push(this.id); // only for testing 
$(this.id).DataTable({ 
     "language":{ 
      "lengthMenu":"Mostrar _MENU_ registros por página.", 
      "zeroRecords": "Lo sentimos. No se encontraron registros.", 
      "info": "Mostrando página _PAGE_ de _PAGES_", 
      "infoEmpty": "No hay registros aún.", 
      "infoFiltered": "(filtrados de un total de _MAX_ registros)", 
      "search" : "Búsqueda", 
      "LoadingRecords": "Cargando ...", 
      "Processing": "Procesando...", 
      "SearchPlaceholder": "Comience a teclear...", 
      "paginate": { 
       "previous": "Anterior", 
       "next": "Siguiente", 
       } 
     } 
    }); 
}); 
});

來源

2015-06-04 19:26:01 zeppelin

在解決方案3中，不需要調用each（）。當你調用'jQuery（）'時，它會返回一個對象數組，其中鏈接的函數獲取它們中的每一個的上下文。同樣的理由，你不需要寫'$（'。boxes'）。each（$（this）.hide（））'來隱藏每個匹配的元素。 – azium

真正的問題是你怎麼知道哪個元素傳遞給你的DataTable函數。考慮以下內容：

$(document).ready(function() { 
    $(someVariable).DataTables({ ... }) 
})

您將不得不做兩件事之一。按照您的建議（不工作）通過src=".."傳遞您想要的id的名稱，或者您將不得不修改someVariable。在這兩種情況下，你都必須手動告訴代碼你想要哪個元素，所以你並不是真的爲自己節省很多工作。

你可以做什麼，遵循某種命名約定，以便你的函數將總是匹配一組選擇器。

$(document).ready(function() { 
    $('[id^="data-table-"]').DataTables({ ... }) 
})

只要你的表始終以「數據表 - 」像這種方式啓動：

id="data-table-something-something"

的功能，而無需進行硬編碼的ID（或多個ID的）運行每次。

來源

2015-06-04 19:02:26 azium

如何將元素的id傳遞給.js文件？

回答

相關問題